jQuery 根据选择的另一个 SELECT 删除 SELECT 选项（需要所有浏览器的支持）

Question

假设我有这个下拉列表：

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

我想要这样当用户选择 1 时，这是用户可以为下拉菜单 2 选择的东西：

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

或者如果用户选择2：

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

或者如果用户选择3：

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

我尝试了此处发布的代码： jQuery disable SELECT options based on Radio selected (Need support for all browsers)

但它不适用于选择。

请帮忙！ 谢谢！

更新： 我真的很喜欢 Paolo Bergantino 的回答： jQuery disable SELECT options based on Radio selected (Need support for all browsers)

有没有办法修改它以使用选择而不是单选按钮？

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

Answer 1

试试这个。这肯定会工作

      $(document).ready(function () {

    var oldValue;
    var oldText;
    var className = '.ddl';

    $(className)
                .focus(function () {
                    oldValue = this.value;
                    oldText = $(this).find('option:selected').text();
                })
                .change(function () {
                    var newSelectedValue = $(this).val();
                    if (newSelectedValue != "") {
                        $('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
                    }
                    if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
                        $(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
                    }
                    $(this).blur();
                });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
    <select class="ddl" id="A1" name="A1">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A2" name="A2">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A3" name="A3">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A4" name="A4">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>

Answer 2

实际上，使用下面的代码可以很好地删除 IE 中的下拉选项，只要它不是选定的选项（如果不先取消选择该选项，它将无法在“a”上工作）：

var dropDownField = $('#theOptions2');
dropDownField.children('option:contains("b")').remove();

您只需运行此命令即可在第一组 (theOptions1) 的条件语句下删除要删除的任何选项 - 如果选择其中一个，则运行以下行：

var dropDownField = $('#theOptions2');
if ($('#theOptions1').val() == "2") {
    dropDownField.children('option:contains("c")').remove();
}
if ($('#theOptions1').val() == "3") {
    $("#theOptions2 :selected").removeAttr("selected");
    $('#theOptions2').val('b');
    dropDownField.children('option:contains("a")').remove();
}

-汤姆

Answer 3

在 Internet Explorer 的选择列表中记录您 can NOT remove options。

Answer 4

您可以将类添加到您的<option>s 以存储与#theOptions1 的每个值一起使用的类：

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

然后这样做：

$(function() {
    var allOptions = $('#theOptions2 option').clone();
    $('#theOptions1').change(function() {
        var val = $(this).val();
        $('#theOptions2').html(allOptions.filter('.option-' + val));
    });
});

Answer 5

这有效（在 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>