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

您还没有真正提供足够的信息让我们根据内容查看您要禁用的内容，但是，原则上您可以禁用这样的元素：

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

修改

正如waldek_c所说，您可以使用$(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 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);
        }
    }
});

Answer 3

首先，在HTML中使用'options'而不是'option'。然后，'prop'是建议和删除属性的推荐方法：

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

Here你是一个工作小提琴手。希望它有所帮助。

从其他下拉选项中选择值时，禁用整个下拉元素

3 个答案: