Hide / Show select options based on another selector's option in jQuery

There was a similar question asked with a great response here: jQuery disable SELECT options based on Radio selected (Need support for all brow开发者_开发问答sers)

I would like to know how to modify the code to use a select box instead of the radio buttons.

---

the modified plugin is:

    jQuery.fn.filterOn = function(selection, 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);
            $(selection).change(function(){
                    $(selection + " option:selected").each(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(
                        $('<option>').text(option.text).val(option.value)
                        );
                    }
                        });
                    });
                });
        });
    };

        $(function() {
        $('#theOptions').filterOn('#dropDown', {
            'abc': ['a','b','c'],
            '123': ['1','2','3']        
        });
    });

and sample HTML is:

<select id="dropDown">
    <option value="abc" id="abc" >ABC</option>
    <option value="123" id="123">123</option>
</select>

<select id="theOptions">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>

</select>

For completeness here is a demo