DOMのページ読み込み時にレンダリングされないドロップダウンコンテンツを選択します

ikiK 投稿 Dev

twoK

[選択済み]ドロップダウンの要素を検査するときのページの読み込み時に、実際のコンテンツが欠落しています（内部.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>

ページの読み込み時にデータを入力する方法はありますか？

上から見たように、以前の[選択済み]ドロップダウン選択に基づいてオプションをフィルタリングするカスタムデータ属性を使用しているためです。

現在の問題は、最初のドロップダウンで選択を行うと、コンテンツがDOMにないため、フィルターが機能しないことです。2番目のドロップダウンを1回クリックして、コンテンツが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選択の選択を解除して、HTML選択自体でフィルタリングを実行してから、再度選択する方法はありますか？

選択したドロップダウンを別のドロップダウンに基づいてフィルタリングする方法はありますか？データ属性またはその他を使用していますか？

チャンダン

ページ読み込みのオプションに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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]