Скрыть / Показать параметры выбора, основанные на параметре другого селектора в jQuery - PullRequest
Новая
       5

Скрыть / Показать параметры выбора, основанные на параметре другого селектора в jQuery

4 голосов
/ 23 января 2011

Был задан похожий вопрос с большим ответом: jQuery отключить опции SELECT на основе выбранного радио (нужна поддержка всех браузеров)

Я хотел бы знать, как изменитькод для использования поля выбора вместо переключателей.

1 Ответ

6 голосов
/ 23 января 2011 
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>

Для полноты здесь приведено демо

...