Добавление / удаление параметров списка выбора в IE
У меня есть 2 списка выбора, выбранный элемент в первом элементе управления отображается во втором. Список условий сначала загружает все доступные параметры, а затем фильтрует их в зависимости от того, что выбрано в списке категорий.
Моя проблема заключается в том, что если я фильтрую более одного раза, моя переменная начальных условий уменьшается каждый раз при изменении параметра выбора категорий, и я получаю неполные данные в списке условий.
Например, я фильтрую по категории 1, чтобы увидеть все условия, относящиеся к категории 1, в моем списке условий. Если я затем отфильтрую по категории 2, он присваивает только три текущих условия категории 1 переменной условий перед фильтрацией, и в результате я не получаю никаких условий.
Как мне фильтровать по полному исходному списку условий каждый раз при изменении категории?
$(document).on('change', '#category', function (e) {
var categories = $("#category option");
var conditions = $("#condition option");
var $selectedIndex = $(this).find('option:selected').data('position');
$("#condition").empty();
conditions.each(function (index, value) {
$value = $(value);
if ($value.hasClass('cat-' + $selectedIndex)) {
$("#condition").append($value);
}
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id = "category">
<option class = "cat-1">Category 1</option>
<option class = "cat-2">Category 2</option>
<option class = "cat-3">Category 3 </option>
</select>
<select id = "condition">
<option class = "cat-1">Category 1-A</option>
<option class = "cat-1">Category 1-B</option>
<option class = "cat-1">Category 1-C</option>
<option class = "cat-2">Category 2-A</option>
<option class = "cat-2">Category 2-B</option>
<option class = "cat-2">Category 2-C</option>
<option class = "cat-3">Category 3-A</option>
<option class = "cat-3">Category 3-B</option>
<option class = "cat-3">Category 3-C</option>
</select>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я пробовал ваш код, и он тоже не работает в хроме. С вашим кодом не так:
а) $ selectedIndex был инициализирован как undefined
б) Вы берете исходный список выбора условий и делаете его пустым перед повторной инициализацией. Это приведет к потере всех начальных параметров, присутствующих в условиях select, когда повторная инициализация произойдет в функции обратного вызова, переданной методу conditions.each.
Приведенный ниже код будет работать для вас:
var conditions = $("#condition option");
$(document).on('change', '#category', function (e) {
$("#condition").empty();
var selectedCategory = $(this).children("option:selected").val();
conditions.each(function (index, value) {
$value = $(value);
if ($value.val().indexOf(selectedCategory) > -1) {
$("#condition").append($value);
}
});
$("#condition").val($("#condition option:first").val());
});
Я получаю длину 0 для переменной условий, если я не объявлю ее в событии изменения.
Этот вариант работает, но как выбрать первый элемент, относящийся к этой категории.
Эта строка $("#condition").val($("#condition option:first").val()); выполняет работу по выбору первого элемента в раскрывающемся списке условий.
Спасибо, я забыл добавить сюда атрибут данных в разметке, который использовал $ selectedIndex