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

这适用（在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>

Answer 2

您可以在<option>中添加要存储的#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 3

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

Answer 4

实际上，使用下面的代码会删除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 5

试试这个。这肯定会有用

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

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

5 个答案: