#javascript #html #jquery #html_select #фильтры
Есть 2 выпадающих меню: в первом - выводится марка автомобиля, а во втором, -к каждой
марке во вложенности дерева с глубиной data-sf-depth="1"? - ее модели. Как сделать
списки связанными, чтобы при выборе каждой марки появлялись только ее модели? У меня
пока получилось сделать так, что при выборе марки выводятся только модели (но все,
а не конкретно ее!), либо не выводится ни одна модель.
window.addEventListener("DOMContentLoaded", function() {
var select1 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0],
select2 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[1].getElementsByClassName("sf-input-select")[0],
opt = [].slice.call(select1.options, 0),
opt2 = [].slice.call(select2.options, 0);
var value;
select1.onchange = function() {
opt.forEach(function(option, i) {
if (option.selected) {
value = option.value;
return false;
}
});
opt2.forEach(function(option, i) {
var parent = option.parentNode;
if (option.classList.contains("sf-level-1") || !i) {
select2.appendChild(option);
} else {
if (parent) {
parent.removeChild(option);
}
}
});
}
});
Ответы
Ответ 1
Я бы немного изменил логику: не стал бы в select с моделями дублировать марки, оставил бы там только модели и сделал бы этот select недоступным для выбора, пока не выбрана марка. Связал бы я два select'а следующим образом: моделям задал бы класс, который соответствует value марки. $('.cars').change(function(){ $('.models').prop('selectedIndex', 0); //ощищаем select с моделями при каждом изменении select'а с марками var car = $(this).val(); //получаем value выбранной марки if(car != '') { //проверяем, выбрана ли хоть какая-то марка $('.models').attr('disabled',false); //открываем select с моделями $('.models option').css('display','none'); //сначала скрываем все модели $('.models option.'+car).css('display','inline'); //затем открываем те, которые нам нужны } else { $('.models').attr('disabled',true); //если не выбрана ни одна марка, скрываем select с моделями } });
