根据第一个下拉菜单禁用第二个下拉选项

Question

我有两个动态下拉菜单，但下拉菜单的值和选项都相同。我想要的是，如果用户从第一个下拉列表中选择“苹果”，那么第二个下拉列表的苹果选项将被禁用（使用 javascript）。简而言之，用户不能从两者中选择相同的值。

//first drop down
<select name="fruit1">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

//second dropdown  
<select name="fruit2">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

我已经尝试过使用 jQuery：

function witness()
{
    var op=document.getElementById("witness1").value;
    $('option[value='+op+']').prop('disabled', true);
}

但是，这两个下拉菜单的值都被禁用，如果我选择芒果，那么苹果将不会启用它保持禁用状态。我知道我没有传递 id 所以两个下拉值都被禁用但我应该在哪里传递？

如果用户选择苹果，那么在第二个下拉菜单中苹果将被禁用，我想使用 Javascript 或 jQuery 来执行此操作。

Answer 1

小提琴：https://jsfiddle.net/3pfo1d1f/

要获得您所追求的功能，您需要在第一个下拉列表中挂钩 change 事件，以便在第二个下拉列表中禁用匹配元素。

我还将第二个下拉列表中的第一个元素初始化为禁用（在第一个下拉列表中默认选择此元素）

按原样使用 jquery：

HTML：

<!-- first dropdown -->
<select id="fruit1">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

<br /> <br />

<!-- second dropdown -->
<select id="fruit2">
    <option value="1" disabled>Apple</option>
    <option value="2">Mango</option>
</select>

JQuery:

$('#fruit1').on( "change", function() {
    var op = $( this ).val();
    $('#fruit2 option').prop('disabled', false);
    $('#fruit2 option[value='+op+']').prop('disabled', true);
});

无论您在两个下拉菜单中有多少选项，这应该仍然有效

Answer 2

试试这个：

HTML：

<select id='fruit1' onchange="witness();">
    <option selected></option>
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

<select id='fruit2'>
    <option selected></option>
    <option value="1">Apple</option>
    <option value="2">Mango</option>
</select>

JQuery:

function witness(){
    $("#fruit2 option").each(function(){
        if($("#fruit1 option:selected").val() == $(this).val())
            $(this).attr("disabled", "disabled");
        else
            $(this).removeAttr("disabled");
    });
}

您可以在此处查看一个工作示例： https://jsfiddle.net/mqjxL4n0/

Answer 3

<select name="firstselect" id="firstselect">
   <option value="apple">Apple</option>
   <option value="orange">Orange</option>
</select>

<select name="secondselect" id="secondselect">
   <option value="apple">Apple</option>
   <option value="orange">Orange</option>
</select>

<script>
   $(document).ready(function(){
      $('#firstselect').change(function(){
         var firstselected = $(this).val();
         if(firstselected ){
             $('#secondselect option').each(function(){
                $(this).prop('disabled', false);
                if($(this).val()==firstselected )
                $(this).prop('disabled', true);
             });
         }
         else {
             $('#secondselect option').each(function(){
                $(this).prop('disabled', false);
             });
         }
      });
   });
</script>