Question

我有两个下拉列表，其中包含不同的选项，但选项数量相同。使用javascript（和jQuery 1.11.1）我需要通过下拉菜单来限制（通过禁用，而不是隐藏）下一个选项及其下一个选项中可用的选项。

即：

<select id="dropdown1">
    <option value="0">option1_1</option> **
    <option value="0">option1_2</option> **
    <option value="1">option1_3</option> **DISABLED**
    <option value="2">option1_4</option> **DISABLED**
    <option value="3">option1_5</option> **DISABLED**
</select>

<select id="dropdown2">
    <option value="0">option2_1</option> **DISABLED**
    <option value="0">option2_2</option> **DISABLED**
    <option value="0">option2_3</option> **
    <option value="1">option2_4</option> **
    <option value="2">option2_5</option> **
</select>

如果选择dropdown1中的选项2，则选项1＆amp; dropdown2中的2个被禁用，只有其余选项在dropdown2中可用，dropdown1中未使用的选项也将被禁用。如果在dropdown2中进行初始选择，Dropdown2将以相同的方式控制dropdown1。

任何帮助都将不胜感激。

Answer 1

您可以使用disable属性来实现此要求。

这是Fiddle。

$("select#dropdown1 option[value*='1'],select#dropdown1 option[value*='2'],select#dropdown1 option[value*='3'],select#dropdown2 option[value*='0']").prop('disabled',true);

希望这能解决你的问题。

- 帮助：）

Answer 2

 $(document).ready(function () {
        var index;
        $('#dropdown1').change(function ()
            {
            $('#dropdown2 option').removeAttr('disabled');
            index = $(this).find('option:selected').index() + 1;
            $('#dropdown2').find("option:lt(" + index + ")").prop("disabled", true);

            $('#dropdown1').find("option:gt(" + $(this).find('option:selected').index() + ")").prop("disabled", true);
            index = index -1;
            $('#dropdown1').find("option:lt(" + index + ")").prop("disabled", true);
            });
    });

两个下拉列表具有相互限制的不相同选项

2 个答案: