Databases
StackOverflow2013
Postsdbo
POjQuery remove SELECT options based on another SELECT selected (Need support for all browsers)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery remove SELECT options based on another SELECT selected (Need support for all browsers)
    text
    copied!<p>Say I have this dropdown:</p> <pre><code>&lt;select id="theOptions1"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;/select&gt; </code></pre> <p>I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:</p> <pre><code>&lt;select id="theOptions2"&gt; &lt;option value="a"&gt;a&lt;/option&gt; &lt;option value="b"&gt;b&lt;/option&gt; &lt;option value="c"&gt;c&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Or if the user selects 2:</p> <pre><code>&lt;select id="theOptions2"&gt; &lt;option value="a"&gt;a&lt;/option&gt; &lt;option value="b"&gt;b&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Or if the user selects 3:</p> <pre><code>&lt;select id="theOptions2"&gt; &lt;option value="b"&gt;b&lt;/option&gt; &lt;option value="c"&gt;c&lt;/option&gt; &lt;/select&gt; </code></pre> <p>I tried the code posted here: <a href="https://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brows">jQuery disable SELECT options based on Radio selected (Need support for all browsers)</a></p> <p>But it doesn't work for selects. </p> <p>Please help! Thank you!</p> <p>UPDATE: I really like the answer Paolo Bergantino had on: <a href="https://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brows">jQuery disable SELECT options based on Radio selected (Need support for all browsers)</a></p> <p>Is there anyway to modify this to work with selects instead of radio buttons?</p> <pre><code>jQuery.fn.filterOn = function(radio, values) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({value: $(this).val(), text: $(this).text()}); }); $(select).data('options', options); $(radio).click(function() { var options = $(select).empty().data('options'); var haystack = values[$(this).attr('id')]; $.each(options, function(i) { var option = options[i]; if($.inArray(option.value, haystack) !== -1) { $(select).append( $('&lt;option&gt;').text(option.text).val(option.value) ); } }); }); }); }; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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