Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как организовать вывод многоуровневого selectа? (https://javascript.ru/forum/misc/72068-kak-organizovat-vyvod-mnogourovnevogo-selecta.html)

giwuf 16.01.2018 14:27

Цитата:

Сообщение от рони
giwuf,
не понимаю, но может вы хотели так

рони, да! только единственное важное, что вам не сообщил - список chosen-results изначально пуст и заполняется только в момент раскрытия sf-input-select.
Повесил обработчик 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;
    };

Можно как-то привязаться по триггеру и отфильтровать так, как планировал изначально?

giwuf 17.01.2018 12:23

Решил изменить и привести все в упрощенный вид. Теперь просто сравниваю первый (марки) и второй (марки и модели, которые лежат глубже по дереву) список на наличие совпадений и выводе моделей только для выбранной марки, но никак не получается этого сделать, т.к. связи марок с моделями как таковой нет и пока у меня при выборе выводятся абсолютно все модели
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="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
  <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="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
  <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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;A6C5</option>
		<option class="sf-level-1 sf-item-61" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A4</option>
		<option class="sf-level-1 sf-item-62" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6</option>
	</select>
</label>
</li>

рони 17.01.2018 13:32

giwuf,
не осилил и мне сложно понять, зачем нужны все атрибуты в option , кроме value.

giwuf 17.01.2018 17:23

Эти атрибуты берутся из динамически подтягиваемых данных. Я пытаюсь пока выкрутиться через nextElementSibling, т.к. четкой связи между списками нет
if (option.value == value) {
    subling = option.nextElementSibling;
}

пока достиг только промежуточных результатов

UPD:
мне помогли прийти вот к такому решению, но оно на jquery
и при переносе получаю такую ошибку
Цитата:

Uncaught TypeError: $ is not a function


Часовой пояс GMT +3, время: 10:59.