Цитата:
Повесил обработчик 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, время: 10:59. |