Как убрать накопление данных во втором select`e при выборе значения из первого?

Question

[BuBux]

$(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>');
    	});
    });
});

Есть два selecta. При смене значений в первом, во втором значения просто накапливаются и образуется длинный список.

Comments

[FeST1VaL]

в каком смысле накопление? ну очищайте перед заполнением новыми значениями

[BuBux]

Артем Будин, в первом списке есть A,B. При выборе A во втором списке отображается a1,a2. Если поменяю значения в первом списке на B, то во втором будет: a1,a2, b1. Как-то так. С JS знаком плохо, только начал учить.

Answer 1

[Александр Талалаев]

Добавьте строчку

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

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

Ну и чтобы уменьшить обращения к DOM дереву, элемент #modules можно тоже скешировать.

$(document).on('change','#direct',function(){
  let id = document.getElementById("direct").value; // Возможно тут вам тоже не нужен let? мб const
 const modulesEl = $("#modules");

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

Comments

[BuBux]

Помогло. При таком коде, если я выберу в первом селекте значение, то во втором уже не будет доступно значение по типу "выберите", ну пустое. Я добавил строку $("#modules").append('- выберите модуль -'); после $("#modules").html('');
Не знаю правильно ли это, но в данной ситуации помогло. Но теперь если я допустим выберу в первом селекте что-то, а потом возвращаю значение на "выберите", во втором селекте высыпаются все значения. Можно ли это как-то решить? HTML:

<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>

[Александр Талалаев]

BuBux,
да, забыл пояснить modulesEl.html(''); здесь мы вызываем метод html, при этом передаём туда пустую строку ''. Таким образом, внутри элемента modulesEl будет пусто. Но так же можно добавить туда любой другой html.
Те вам нужно заменить на

modulesEl.html('<option value="">- выберите модуль -</option>');

[BuBux]

Александр Талалаев, Спасибо. Решено.

[BuBux]

Александр Талалаев, вопрос наверное не по теме. Если я добавлю для selecta class="form-control select2" скрипт уже не работает. В чём проблема может быть?

[Александр Талалаев]

BuBux, если вы используете select2, то под него нужно отдельно переписывать код. В нём уже много заложено внутри, в том числе и получение данных извне и построение динамиески селекта.

[BuBux]

Александр Талалаев, указал class="form-control" и вроде как тоже работает как надо.

[Александр Талалаев]

BuBux, сам класс по себе, никак не влияет на поведение и работу js. НО нередко висит автомтаизация, и срабатывание js, когда определенные классы присутсвуют в html коде. Многие библиотеки так делают для облегчения использования, те не надо писать js, достаточно подключить библиотеку и применить класс, и все начнёт работать. И это конечно же может влиять на другие скрипты в коде.

[BuBux]

Александр Талалаев, понял. Спасибо.