Selectize dropdown content not rendered on page load in DOM

Question

I am using Selectize.js.

On page load when inspecting the elements in Selectized drop-down the the actual content is missing (inside .selectize-dropdown-content):

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

After the click it populates the content:

<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>

Is there a way to populate it on page load?

Because as seen from above I use custom data attributes with whom I filter the options based on previous Selectized drop-down selection.

Current problem is that when i make selection in first drop-down the filter is not working as it has nothing to filter, as content is not in DOM, just after i click once on second drop-down and content populates in DOM the filtering starts working after changes on first one.

I tried triggering/simulating the click event, its not working.

I have read API and usage documentation, if I missed answer, I didn't understand it (not a native english speaker)

$('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>

EDIT:

Is there a way to programmatically de-selectize the HTML select, so I can do filtering on HTML select itself, and then selectize it again?

Is there any way of doing filtering of one selectized drop-down based on another? Using data attribute or any other?

Answer 1

You can use refreshOptions method to populate options on page load

Example 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>

Example 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

This is alternative solution.

Whenever your selectize-input is clicked you can checked if the input where click event has taken place is related to which select depending on this perform tasks .If its for something(just for example) then you first need to hide all divs inside selectize-dropdown-content and then check if data-attribute matches with the value of cars select-box depending on this show that div else hide.Also, as divs are generated on click of input-box so you can make one option selected as default .

Demo Code :

$('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>