javascript - 根据 jQuery 中另一个选择器的选项隐藏/显示选择选项

Question

有一个类似的问题在这里得到了很好的回应:jQuery disable SELECT options based on Radio selected (Need support for all browsers)

我想知道如何修改代码以使用选择框而不是单选按钮。

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>

为了完整起见，这里是一个 demo