javascript - 从另一个下拉选项中选择值时禁用整个下拉元素

Question

我有一个包含四个下拉列表的 JSP 页面，其中一个是控制下拉列表，我必须根据对任何 onchange 事件的选择来决定需要禁用哪个其他下拉列表。

例如:

//Selecting dropdown
    <Select id="dropDown1" name=" selection">
    <options value="1">choice1</options>
    <options value="2">choice2</options>
    <options value="3">choice3</options>
    </select>

//Other drop downs:
     <Select id="dropDown2" name="filter1">
        <options value="1">put1</options>
        <options value="2">put2</options>
        <options value="3">put3</options>
     </select>

     <Select id="dropDown3" name="filter2">
        <options value="1">put1</options>
        <options value="2">put2</options>
        <options value="3">put3</options>
     </select>

     <Select id="dropDown4" name="filter3">
        <options value="1">put1</options>
        <options value="2">put2</options>
        <options value="3">put3</options>
     </select>

此外，当我从下拉菜单中选择 choice1 时，我需要禁用 dropDown3 并且当我从下拉菜单 1 中选择 choice3 时那么它应该启用 dropDown3 并禁用 dropDown2 并且当选择 choice1 时它会启用所有内容。

我遵循了 JQuery 中的一些教程，其中有函数 removeAttr() 但由于我是 JQuery 和 Javascript 的新手，我不确定如何将所有内容放在一起并尝试调用 onchange() 事件并执行此操作？任何人都可以帮忙指导一下吗？

Answer 1

我不太明白你想要什么，但执行此类操作的代码非常简单。

jsFiddle Demo

jQuery:

var myId;

$('select').change(function() {
    $this = $(this);
    myId = $this.attr('id');
    myVal = $this.val();
    if (myId == 'dropDown1') {
        $('select').prop('disabled',false);
        if (myVal == 1) {
            $('#dropDown4').prop('disabled', true);
        }else if (myVal == 2) {
            $('#dropDown3').prop('disabled', true);
        }else if (myVal == 3) {
            $('#dropDown2').prop('disabled', true);
        }
    }
});