title: Selectize dropdown content not rendered on page load in DOM
body: <p>I am using <a href="https://selectize.github.io/selectize.js/" rel="nofollow noreferrer">Selectize.js</a>.</p>
  <p>On page load when inspecting the elements in Selectized drop-down the the actual content is missing (inside <code>.selectize-dropdown-content</code>):</p>
  <pre><code>&lt;div class=&quot;selectize-dropdown single aritklmodel&quot; style=&quot;display: none;&quot;&gt;
    &lt;div class=&quot;selectize-dropdown-content&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>After the click it populates the content:</p>
  <pre><code>&lt;div class=&quot;selectize-dropdown single aritklmodel&quot; style=&quot;display: none; visibility: visible; width: 255.617px; top: 34px; left: 0px;&quot;&gt;
    &lt;div class=&quot;selectize-dropdown-content&quot;&gt;
      &lt;div style=&quot;display: block&quot; data-marka=&quot;2&quot; data-selectable=&quot;&quot; data-value=&quot;a2&quot; class=&quot;&quot;&gt;a2&lt;/div&gt;
      &lt;div style=&quot;display: block&quot; data-marka=&quot;1&quot; data-selectable=&quot;&quot; data-value=&quot;A50&quot;&gt;A50&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Is there a way to populate it on page load?</p>
  <p>Because as seen from above I use custom data attributes with whom I filter the options based on previous Selectized drop-down selection.</p>
  <p>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.</p>
  <p>I tried triggering/simulating the click event, its not working.</p>
  <p>I have read API and usage documentation, if I missed answer, I didn't understand it (not a native english speaker)
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').selectize({
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
           &lt;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" /&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;select name="cars" id="cars"&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>EDIT:</strong></p>
  <p>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?</p>
  <p>Is there any way of doing filtering of one selectized drop-down based on another? Using data attribute or any other?</p>