Changing dropdown values from choice of previous dropdowns in jquery
<p>I have following code which works for radio buttons but need to be changed to have selection boxes make the change rather than the radio buttons, is this possible?</p>

<p><a href="http://jsfiddle.net/Nksku/" rel="nofollow">http://jsfiddle.net/Nksku/</a></p>

<p><strong>HTML</strong></p>

<pre><code>ABC: &lt;input type="radio" name="abc123" id="abc"/&gt;
123: &lt;input type="radio" name="abc123" id="123"/&gt;

&lt;select id="theOptions"&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;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><strong>jQuery</strong></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)
                    );
                }
            });
        });            
    });
};

$(function() {
    $('#theOptions').filterOn('input:radio[name=abc123]', {
        'abc': ['a','b','c'],
        '123': ['1','2','3']        
    });
});​
</code></pre>
