隱藏/顯示基於jQuery中另一個選擇器選項的選擇選項

Question

有一個類似的問題在這里得到了很好的回應： jQuery禁用基於Radio選擇的SELECT選項（需要支持所有瀏覽器）

我想知道如何修改代碼以使用選擇框而不是單選按鈕。

Answer 1

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']        
        });
    });

示例HTML是：

<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>

為了完整起見，這是一個演示