从另一个下拉菜单中选择一个值时，禁用整个下拉菜单元素

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>

此外，当我从下拉菜单1中选择choice1时，我需要禁用dropDown3而当我从下拉菜单1中选择choice3 ，它应该启用dropDown3并禁用dropDown2而在选择choice1它将启用所有功能。

我遵循了JQuery中的一些功能为removeAttr()的教程，但是由于我是JQuery和Javascript的新手，所以我不确定如何将所有内容放在一起并尝试调用onchange()事件来做到这一点？ 谁能帮忙指导一下。

Answer 1

您尚未真正为我们提供足够的信息来了解要基于哪些内容禁用的内容，但是原则上可以禁用以下元素：

$("#dropDown1").on("change", function(){
  $("#dropDown2").attr("disabled", "disabled");
});

编辑

就像waldek_c所说的那样，您可以使用$(this).val();来获得回调函数内部下拉列表的值$(this).val(); 并相应地禁用内容。

我还将将要禁用的元素存储为选项值或数据属性或其他内容。

例如：

<Select id="dropDown1" name=" selection">
  <options value="dropDown2">choice1</options>
  <options value="dropDown3">choice2</options>
  <options value="dropDown4">choice3</options>
</select>

$("#dropDown1").on("change", function(){
  var dropDownToDisable = $(this).val();
  $(dropDownToDisable).attr("disabled", "disabled");
});

Answer 2

我不太清楚您想要什么，但是执行此类操作的代码非常简单。

jsFiddle演示

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

Answer 3

首先，在HTML中使用“选项”而不是“选项”。 然后，建议使用“ prop”设置和删除属性：

$("#dropDown3").attr("disabled", true);

这是工作中的提琴手。 希望能帮助到你。