Задать вопрос
@ligisayan

Как отфильтровать вывод “замаскированного” selecta?

Всем привет!
Есть код динамического 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="[&quot;http:\/\/site.by\/ad-category\/[0]\/&quot;]">
  <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;
    };

Можно ли как-то привязаться по триггеру и отфильтровать так, как я это планировал изначально?
  • Вопрос задан
  • 56 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы