Как изменить значение select при изменении другого select?

Question

[BuBux]

Допустим есть выпадающий select "направление". И второй select "модули". При выборе направления должны в select модулей выпадать модули соответствующие данному направлению(по id).
Пробую так, но не получается.

<select id="directions">
    <option value="">- выберите направление -</option>
        <?php
	    foreach($info['dir_l'] as $dir){
		echo "<option value='".$dir['ID']."'>".$dir['NAME']."</option>";
	    }
	?>
</select>

<select id="modules">
    <option value="">- выберите модуль -</option>
</select>

$("#directions").change(function () {
    $.getJSON("'task/ajax'", null, function (data) {
        $("#modules option").remove();
        $.each(data.res, function (index, item) {
            $("#modules").append(
                $("<option></option>").text(item.N).val(item.ID)
            )
        });
    });
});

function actionAjax(){
    $res = GroupCL::getList(1);
     echo json_encode($res);
     return;
}

Не знаю как в task/ajax правильно через js передать id направления. Сейчас я статически подставляю 1, но даже так не работает.

Answer 1

[Иван Дмитриев]

https://codepen.io/wolf1848/pen/rNVJxMx Вот тут работает вставка в select новых значений
На сервер через jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
вы отправляете данные в дата к примеру так

$.getJSON("task/ajax.php", {id:1}, function (data) {});

На сервере обрабатываете вот так

$res = GroupCL::getList($_REQUEST['id']);//ваша выборка по id
ob_clean(); // очищаем буфер вывода что бы был валидный json
echo json_encode($res);
die(); //останавливаем выполнение что бы не было ничего лишнего

Не забудьте объект $res привести к состоянию в котором будете обрабатывать его на js

Comments

[BuBux]

Ведь в данном случае никакие библиотеки подключать не надо? Пробую запустить у себя пример https://codepen.io/wolf1848/pen/rNVJxMx , но не работает.

[Иван Дмитриев]

BuBux, Вы локально пробуете ? jquery должен быть подключен.

[BuBux]

Иван Дмитриев, не локально, на хостинге уже лежит проект.
В футере подключены такие jquery-библиотеки:

<script src="/template/assets/js/jquery-2.1.4.min.js"></script>
<script src="/template/assets/js/jquery.app.js"></script>

Ну видимо это не те.

[Иван Дмитриев]

Пришлите скрин из консоли браузера

[Иван Дмитриев]

BuBux, Вероятнее всего вы используете мой скрипт раньше чем подключаете jquery

[BuBux]

Иван Дмитриев,

[BuBux]

Иван Дмитриев, вообще да. Я скрипт использую перед подключением footera, где и подключаю библиотеку.

[Иван Дмитриев]

BuBux, У вас jquery либо поздно подключен либо не подключен совсем. В футере подключайте библиотеки последовательно сперва jquery потом все для чего он нужен а в конце свои скрипты.

[BuBux]

Иван Дмитриев, вынес Ваш скрипт в отдельный файл и подключил его в футере ниже подключения jquery и пример работает. Корректно ли подключать jquery с CDN?

[Иван Дмитриев]

BuBux, Можно, но я бы рекомендовал что бы библиотеки были локально, так как уже были прецеденты когда великий русский фаервол заблочил гугл ) И все кто пользовался cdn схватились за головы )

[BuBux]

Иван Дмитриев, по поводу подключения библиотеки все понятно, спасибо. Хотелось бы по примеру сделать свою поставленную задачу, но js я только начинаю учить, и видимо ошибок куча. Если не трудно, подскажите в чём ошибки.

<select id="direct">
    <option value="">- выберите направление -</option>
    <?php if (is_array($directions)): ?>
        <?php foreach ($directions as $direction): ?>
	    <option value="<?=$direction['ID']?>">
	        <?php echo $direction['NAME']; ?>
	    </option>
	<?php endforeach; ?>
    <?php endif; ?>
</select>

<select id="modules">
    <option value="">- выберите модуль -</option>
</select>

$(document).on('change','#direct',function(){
    $.getJSON("task/ajax", {id:1}, function (data) {
        $.each(res, function (index, item) {
      		$("#modules").append('<option value ="'+item.ID+'">'+item.NAME+'</option>');
    	});
    });
});

function actionAjax(){
    $action = 'S';
    $params['GR'] = $_REQUEST['id'];
    $table = 'MODULE';
    $token = $_SESSION['token'];
    $params = json_encode($params, JSON_UNESCAPED_UNICODE);

    $res = GroupCL::getGroups($action, $table, $token, $params);
    ob_clean();
    echo json_encode($res);
    die();
}

Вы в getJSON передали путь к файлу, но там ведь прописывается ссылка. Я в проекте использую архитектуру MVC. task/ajax это значит task-контроллер и метод его ajax. И как мне уйти от статической передачи id=1, тоже не пойму. Чтобы при смене селекта направлений, его id попадала туда.

[Иван Дмитриев]

BuBux, Во первых - эта функция ($.getJSON) выполняет get запрос и ей пофиг какая у вас там архитектура открываете вкладку network в консоли браузера и смотрите куда летит запрос , вообще советую использовать $.ajax вместо $.getJSON и заодно почитать как минимум её параметры.
Во вторых функция $.each(res, function (index, item) перебирает массив (res) а запрос вам возвращает data банально некорректное имя переменной. Плюс убедитесь что сервер вам возвращает массив а не объект.
И третье , на сервере убедитесь что php вызывает вашу функцию actionAjax. Это станет понятно по сообщению во вкладке network.

И походу вам нужнен не ответ на вопрос а решение задачи , и тут вам не форум а программист нужен : -)

[BuBux]

Иван Дмитриев, При смене селекта строится запрос по пути /task/task/ajax?id=101. Заменилв getJSON("task/ajax") на getJSON("ajax") , теперь запрос вроде по правильному пути /task/ajax?id=101. По поводу не корректного имени переменной (data, res), тоже заметил, сменил на data. Возвращается массив.

[BuBux]

Иван Дмитриев, Запрос выполняется. Но теперь при каждом выборе select направления, в модулях дублируются данные. Видимо это из-за того что я статически передаю id.

[BuBux]

Иван Дмитриев, Не подскажите как правильно id выбранного select`a получить?

$(document).on('change','#direct',function(){
	let userId = $(this).find('option:direct').data('value');

    $.getJSON("ajax", {userId}, function (data) {
        $.each(data, function (index, item) {
      		$("#modules").append('<option value ="'+item.ID+'">'+item.NAME+'</option>');
    	});
    });
});

[BuBux]

Иван Дмитриев, id получаю, но в селекте модулей идёт "накопление". Выбрав первый раз селект направлений, в селекте модулей отображается то что надо. Но когда я сменю направление, в модулях к результату первого выбора селекта, добавляются результаты второго.

$(document).on('change','#direct',function(){
	let id = document.getElementById("direct").value;

    $.getJSON("ajax", {id}, function (data) {
        $.each(data, function (index, item) {
      		$("#modules").append('<option value ="'+item.ID+'">'+item.NAME+'</option>');
    	});
    });
});

[Иван Дмитриев]

BuBux, Потому что при смене первого списка 2-ой надо очищать