選擇在 DOM 中的頁面加載時未呈現的下拉內容

Question

我正在使用Selectize.js 。

在頁面加載時檢查 Selectized 下拉列表中的元素時，實際內容丟失（在.selectize-dropdown-content內）：

<div class="selectize-dropdown single aritklmodel" style="display: none;">
  <div class="selectize-dropdown-content"></div>
</div>

單擊后它會填充內容：

<div class="selectize-dropdown single aritklmodel" style="display: none; visibility: visible; width: 255.617px; top: 34px; left: 0px;">
  <div class="selectize-dropdown-content">
    <div style="display: block" data-marka="2" data-selectable="" data-value="a2" class="">a2</div>
    <div style="display: block" data-marka="1" data-selectable="" data-value="A50">A50</div>
  </div>
</div>

有沒有辦法在頁面加載時填充它？

因為從上面可以看出，我使用自定義數據屬性，我可以根據之前的 Selectized 下拉選擇來過濾選項。

當前的問題是，當我在第一個下拉列表中進行選擇時，過濾器不起作用，因為它沒有任何內容可以過濾，因為內容不在 DOM 中，就在我單擊第二個下拉列表並且內容填充到 DOM 之后，過濾開始在第一個更改后工作。

我嘗試觸發/模擬點擊事件，但它不起作用。

我已經閱讀了 API 和使用文檔，如果我錯過了答案，我不明白（不是母語為英語的人）

 $('select').selectize({ });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

編輯：

有沒有辦法以編程方式取消選擇 HTML select，這樣我就可以對 HTML select 本身進行過濾，然后再次選擇它？

有什么方法可以根據另一個選擇的下拉列表進行過濾嗎？ 使用數據屬性或任何其他？

Answer 1

您可以使用refreshOptions方法在頁面加載時populate選項

示例 1

 // initialize the Selectize control var $select = $('select').selectize({}); // fetch the instance var selectize = $select[0].selectize; // 0 for select index selectize.refreshOptions(false); // populate option on load

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

示例 2

 // initialize the Selectize control var $select = $('select').selectize({ render: { option: function(data, escape) { return "<div class='option selected' data-id='" + escape(data.id) + "'>" + escape(data.text) + "</div>" } } }); // fetch the instance let car_select = $select[0].selectize; // 0 index for car select let model_select = $select[1].selectize; // 1 index for model select model_select.refreshOptions(false); // populate model select options on page load car_select.on('item_add', function(value, item) { let selector = model_select['$dropdown_content'].children(); model_select.setValue('none'); selector.hide(); selector.each(function() { let tmp = $(this); if (tmp.data('id') == value) { tmp.show(); } }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> <select name="cars" id="cars"> <option data-id="volvo" value="volvo">Volvo</option> <option data-id="saab" value="saab">Saab</option> <option data-id="mercedes" value="mercedes">Mercedes</option> <option data-id="audi" value="audi">Audi</option> </select> <select name="models" id="models"> <option data-data='{"id":"none"}' value="none">--Select model --</option> <option data-data='{"id":"volvo"}' value="volvo xc90">Volvo XC90</option> <option data-data='{"id":"volvo"}' value="volvo xc60">Volvo XC60</option> <option data-data='{"id":"saab"}' value="saab 900 convertible">Saab 900 Convertible</option> <option data-data='{"id":"mercedes"}' value="mercedes benz C class">Mercedes Benz C Class</option> <option data-data='{"id":"mercedes"}' value="mercedes benz A class">Mercedes Benz A Class</option> <option data-data='{"id":"audi"}' value="audi e-tron">Audi E-Tron</option> <option data-data='{"id":"audi"}' value="audi a7">Audi A7</option> </select>

Answer 2

這是替代解決方案。

每當單擊selectize-input時，您都可以檢查發生單擊事件的輸入是否與哪個 select 相關，具體取決於此執行任務。如果它用於something （例如），那么您首先需要將所有 div 隱藏在selectize-dropdown-content然后檢查數據屬性是否與cars選擇框的值匹配，具體取決於此顯示 div 其他隱藏。此外，由於 div 是在單擊輸入框時生成的，因此您可以將一個選項選擇為默認值。

演示代碼：

 $('select#cars').selectize(); $('select#something').selectize({ render: { option: function(data, escape) { return "<div class='option selected' data-marka='" + escape(data.marka) + "'>" + escape(data.text) + "</div>" } } }); $(".selectize-input").on('click', function() { var selector = $(this).closest(".outer").find(".selectize-dropdown-content div") //get value of other select var value = $("#cars").val() //check if id is something if ($(this).closest(".outer").find('select').attr('id') == "something") { selector.hide() //hide divs selector.each(function() { //see if data-marka match value if ($(this).data('marka') === value || $(this).data('value') == 'none') { $(this).show() //show that div } }) } else { //if cars select box is change find next select-box input and change it to default $(this).closest(".outer").next().find(".selectize-control.item").attr('data-value', "none") $(this).closest(".outer").next().find(".selectize-control.item").text("--Select one --"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> <div class="outer"> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="Saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div> <div class="outer"> <select id="something"> <option value="none">--Select one --</option> <option data-data='{"marka": "volvo"}' value="1">1</option> <option data-data='{"marka": "volvo"}' value="2">2</option> <option data-data='{"marka": "Saab"}' value="3">3</option> <option data-data='{"marka": "audi"}' value="4">4</option> <option data-data='{"marka": "mercedes"}' value="5">5</option> <option data-data='{"marka": "mercedes"}' value="6">6</option> </select> <div>