Цитата:
Повесил обработчик onclick на ul
ul.onclick = function() {
optShow("sf-level-0"); // optShow("sf-level-1") или optShow("");
console.log("click");
};
Результат отфильтровало, НО! только в закрытом состоянии. При открытии списка, вывод перезаписывается на изначальный и уже при выборе снова отфильтровывается так, как надо (получается все процессы остаются невидимыми для пользователя). Рабобрался, что в этом виноват класс chosen-with-drop, который то появляется, то исчезает в блоке <div class="chosen-container chosen-container-single chosen-container-active chosen-with-drop" style="width: 170px;" title=""> Руководит этим делом библиотека Chosen/ и код выгдядит так:
Chosen.prototype.results_show = function() {
if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
this.form_field_jq.trigger("chosen:maxselected", {
chosen: this
});
return false;
}
this.container.addClass("chosen-with-drop");
this.results_showing = true;
this.search_field.focus();
this.search_field.val(this.search_field.val());
this.winnow_results();
return this.form_field_jq.trigger("chosen:showing_dropdown", {
chosen: this
});
};
Chosen.prototype.results_hide = function() {
if (this.results_showing) {
this.result_clear_highlight();
this.container.removeClass("chosen-with-drop");
this.form_field_jq.trigger("chosen:hiding_dropdown", {
chosen: this
});
}
return this.results_showing = false;
};
Можно как-то привязаться по триггеру и отфильтровать так, как планировал изначально? |
Решил изменить и привести все в упрощенный вид. Теперь просто сравниваю первый (марки) и второй (марки и модели, которые лежат глубже по дереву) список на наличие совпадений и выводе моделей только для выбранной марки, но никак не получается этого сделать, т.к. связи марок с моделями как таковой нет и пока у меня при выборе выводятся абсолютно все модели
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);
}
}
});
}
});
<li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="["http:\/\/site.com\/ad-category\/[0]\/"]"> <label> <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title=""> <option class="sf-level-0 sf-item-0" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option> <option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option> <option class="sf-level-0 sf-item-19 sf-option-active" selected="selected" data-sf-count="12" data-sf-depth="0" value="audi">Audi</option> </select> </label> </li> <li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="["http:\/\/site.com\/ad-category\/[0]\/"]"> <label> <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title=""> <option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option> <option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option> <option class="sf-level-1 sf-item-59" data-sf-count="1" data-sf-depth="1" value="a6c5"> 156</option> <option class="sf-level-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option> <option class="sf-level-1 sf-item-60" data-sf-count="1" data-sf-depth="1" value="a6c5"> A6C5</option> <option class="sf-level-1 sf-item-61" data-sf-count="1" data-sf-depth="1" value="a6c5"> A4</option> <option class="sf-level-1 sf-item-62" data-sf-count="1" data-sf-depth="1" value="a6c5"> A6</option> </select> </label> </li> |
giwuf,
не осилил и мне сложно понять, зачем нужны все атрибуты в option , кроме value. |
Эти атрибуты берутся из динамически подтягиваемых данных. Я пытаюсь пока выкрутиться через nextElementSibling, т.к. четкой связи между списками нет
if (option.value == value) {
subling = option.nextElementSibling;
}
пока достиг только промежуточных результатов UPD: мне помогли прийти вот к такому решению, но оно на jquery и при переносе получаю такую ошибку Цитата:
|
| Часовой пояс GMT +3, время: 01:06. |