Всем привет!
Есть код динамического selecta, состоящая из 2ух частей:
1) - между изначальная
2) - между куда попадают стилизованный и отформатированный select.
Список chosen-results изначально пуст и заполняется только в момент раскрытия sf-input-select. Мне нужно отфильтровать информацию на выходе по родителю (потомков из списка убрать).
window.addEventListener("DOMContentLoaded", function() {
var select = document.querySelector(".sf-input-select"),
opt = [].slice.call(select.options, 0),
ul = document.querySelector(".chosen-results");
function optShow(cls) {
li = [].slice.call(ul.querySelectorAll("li"), 0);
opt.forEach(function(option, i) {
var parent = option.parentNode;
if (option.classList.contains(cls) || !i) {
select.appendChild(option);
} else {
if (parent) {
parent.removeChild(option);
}
}
});
li.forEach(function(el, i) {
var parent = el.parentNode;
if (el.classList.contains(cls) || !i) {
ul.appendChild(el);
} else {
if (parent) {
parent.removeChild(el);
}
}
});
}
ul.onclick = function() {
optShow("sf-level-0"); // optShow("sf-level-1") или optShow("");
};
});
<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.by\/ad-category\/[0]\/"]">
<label>
<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="display: none;">
<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>
<div class="chosen-container chosen-container-single" style="width: 170px;" title="">
<a class="chosen-single"><span>Audi</span><div><b></b></div></a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off"></div>
<ul class="chosen-results">
<li class="active-result sf-level-0 sf-item-0" data-option-array-index="0">марка а/м</li>
<li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
<li class="active-result result-selected sf-level-0 sf-item-19 sf-option-active" data-option-array-index="2">Audi</li>
</ul>
</div>
</div>
</label>
</li>
В скрытой части мне удалось это сделать для 2ух частей, но при раскрытии списка - в контейнер добавляется класс
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;
};
Можно ли как-то привязаться по триггеру и отфильтровать так, как я это планировал изначально?