Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#select1").change(function() { if ($(this).data('options') === undefined) { /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt; &lt;select name="select1" id="select1"&gt; &lt;option value="1"&gt;Fruit&lt;/option&gt; &lt;option value="2"&gt;Animal&lt;/option&gt; &lt;option value="3"&gt;Bird&lt;/option&gt; &lt;option value="4"&gt;Car&lt;/option&gt; &lt;/select&gt; &lt;select name="select2" id="select2"&gt; &lt;option value="1"&gt;Banana&lt;/option&gt; &lt;option value="1"&gt;Apple&lt;/option&gt; &lt;option value="1"&gt;Orange&lt;/option&gt; &lt;option value="2"&gt;Wolf&lt;/option&gt; &lt;option value="2"&gt;Fox&lt;/option&gt; &lt;option value="2"&gt;Bear&lt;/option&gt; &lt;option value="3"&gt;Eagle&lt;/option&gt; &lt;option value="3"&gt;Hawk&lt;/option&gt; &lt;option value="4"&gt;BWM&lt;option&gt; &lt;/select&gt;</code></pre> </div> </div> </p> <p>Using jQuery <a href="https://api.jquery.com/jquery.data/" rel="noreferrer">data()</a> to store data</p> <blockquote> <p>I guess hiding elements doesn't work cross-browser(2012), I have'nt tested it myself.</p> </blockquote>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload