title: jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)
body: <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>