Question

您好我正在努力使这项工作，在我的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>

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

Answer 1

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

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

 });

和objective2和objective3选择框

相同

我希望它对你有用

Answer 2

使用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');
        }
    });
}

Answer 3

为每个下拉列表添加一个函数onchange，如下所示：

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

然后在js中尝试这个：

function disableOther(data) {
    $('select').not(data).each( function() {
        $('option[value=' + $(data).val() + ']', this).attr('disabled', 'disabled');
    });
}

<强> HERE IS A DEMO

Jquerymobile选择菜单禁用选项

3 个答案: