Question

我有2个下拉列表：

<select id="MainList">
    <option value="0">----</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</select>

<select id="ChildList">
    <option value="0">----</option>
    <option value="5">E</option>
    <option value="6">F</option>
    <option value="7">G</option>
    <option value="8">H</option>
</select>

我想在第一个下拉列表中选择值“B”时隐藏或禁用ChildList中的某些值。示例if：C in first hide或者禁用G秒，如果D先隐藏或禁用G和H秒。

由于

Answer 1

你可以尝试这样的事情......

使用此代码获取所选选项的文本 -

var text = $("#MainList option:selected").text();

然后使用switch cases(like case0-hide D, case1-hide E)，并隐藏子列表中的选项使用此代码 -

 $("#ChildList option[value=valueYouNeedToHide]").attr('disabled','disabled');

启用选项：

$("#ChildList option[value=valueYouNeedToShow]").removeAttr("disabled");

希望这在某种程度上对你有帮助..

Answer 2

在jQuery中：

$('#MainList').change(function() {
    $('#ChildList option').removeAttr("disabled");

    if ($(this).val() == 3) {
        $('#ChildList option[value=7]').attr("disabled","disabled");
    }

    // etc..
});

希望这有效......在Chrome中，null可以取消禁用，但我不确定其他浏览器。

编辑：更改为removeAttr，更好。谢谢ChristopheCVB。

下拉列表中显示/隐藏下拉列表中的元素

2 个答案: