Javascript Jquerymobile选择菜单禁用选项

嗨，我发现很难做到这一点，在我的jquery移动应用程序中，我有3个选择菜单，所有菜单中都有相同的选项，代码如下

<select class="mySelect4" data-corners="false" id="objective1" >
     <option value=1>Select</option>
      <option value=2>Generate</option>
      <option value=3>Increase</option>
      <option value=4>Enhance customer engagement</option>

    </select>

      <select class="mySelect5" data-corners="false" id="objective2" >
     <option value=1>Select</option>
      <option value=2>Generate</option>
      <option value=3>Increase</option>
      <option value=4>Enhance</option>
    </select>

     <select class="mySelect6" data-corners="false" id="objective3" >
     <option value=1>Select objective 3</option>
      <option value=2>Generate</option>
      <option value=3>Increase</option>
      <option value=4>Enhance</option>
    </select>

挑选
生成
增加
增强客户参与度
挑选
生成
增加
增强
选择目标3
生成
增加
增强

如果用户在第一个选择菜单中选择一个选项，则该选项应在其他两个选择菜单中禁用。任何想法或解决方案都将受到欢迎

 $('#objective1').change(function(){
      var value1=$(this).val();

      $('#objective2').find("option").each(function(){
           if($(this).val()==value1){
                $(this).attr("disabled","disabled");
           }
      });

 });

对于objective2和objective3选择框也是如此

我希望它对你有用

对于objective2和objective3选择框也是如此

---

我希望它对使用Jquery的u

有用，因为它非常简单。下面是整个代码

$(document).ready(function(){
    $('#objective1').change(function(event){
        var selectedValue = $(this).val();
        disableElements($('#objective2'),selectedValue);
        disableElements($('#objective3'),selectedValue);
    });

});

var disableElements = function($selectList,selectedValue){
    $selectList.find('option').each(function(){
        if($(this).val() === selectedValue){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
}

---

使用Jquery非常简单。下面是整个代码

$(document).ready(function(){
    $('#objective1').change(function(event){
        var selectedValue = $(this).val();
        disableElements($('#objective2'),selectedValue);
        disableElements($('#objective3'),selectedValue);
    });

});

var disableElements = function($selectList,selectedValue){
    $selectList.find('option').each(function(){
        if($(this).val() === selectedValue){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
}

---

将函数

onchange

添加到每个下拉列表中，如下所示：

<select onchange="disableOther(this)" class="mySelect4" data-corners="false" id="objective1">

---

在每个下拉列表中添加一个函数

onchange

，如下所示：

<select onchange="disableOther(this)" class="mySelect4" data-corners="false" id="objective1">

---

很有趣，因为这个对我不起作用。。。我在上面的提琴中犯了一个错误（在头上使用了你的代码，而不是onload），一旦我的编辑被接受（或者你自己编辑答案），我就可以删除我的否决票，不幸的是，直到那时……很有趣，因为这个对我不起作用。。。我在上面的提琴中犯了一个错误（在头部使用了你的代码而不是onload），一旦我的编辑被接受（或者你自己编辑答案），我可以删除我的否决票，不幸的是，直到那时……我创建了你答案的另一个版本，允许OP选择任何下拉列表（不仅仅是第一个）：我创建了您答案的另一个版本，允许OP选择任何下拉列表（而不仅仅是第一个）：