jQuery 根据选择的另一个 SELECT 删除 SELECT 选项(需要支持所有浏览器) [英] jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

问题描述

假设我有这个下拉菜单:

Say I have this dropdown:

<select id="theOptions1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

我想要这样，当用户选择 1 时，这是用户可以为下拉列表 2 选择的内容:

I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

或者如果用户选择 2:

Or if the user selects 2:

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

或者如果用户选择 3:

Or if the user selects 3:

<select id="theOptions2">
  <option value="b">b</option>
  <option value="c">c</option>
</select>

我尝试了这里发布的代码:jQuery 禁用 SELECT 选项基于已选择收音机(需要所有浏览器的支持)

I tried the code posted here: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

但它不适用于选择.

请帮忙！谢谢！

更新:我真的很喜欢 Paolo Bergantino 的回答:jQuery 禁用 SELECT 选项基于已选择收音机(需要所有浏览器的支持)

UPDATE: I really like the answer Paolo Bergantino had on: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

无论如何要修改它以使用选择而不是单选按钮?

Is there anyway to modify this to work with selects instead of radio buttons?

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(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

推荐答案

这有效(在 Safari 4.0.1、FF 3.0.13 中测试):

This works (tested in Safari 4.0.1, FF 3.0.13):

$(document).ready(function() {
    //copy the second select, so we can easily reset it
    var selectClone = $('#theOptions2').clone();
    $('#theOptions1').change(function() {
        var val = parseInt($(this).val());
        //reset the second select on each change
        $('#theOptions2').html(selectClone.html())
        switch(val) {
            //if 2 is selected remove C
            case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
            //if 3 is selected remove A
            case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
        }
    });
});

还有漂亮的用户界面:

<select id="theOptions1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

这篇关于jQuery 根据选择的另一个 SELECT 删除 SELECT 选项(需要支持所有浏览器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！