基于第一个下拉菜单，禁用第二个下拉菜单

Disable 2nd dropdown option based on first dropdown

本文关键字：下拉菜单 第二个 第一个      更新时间：2023-09-26

我有两个动态下拉菜单，但这两个下拉菜单的值和选项是相同的。我想要的是，如果用户从第一个下拉菜单中选择"苹果"，那么第二个下拉菜单中的苹果选项将被禁用(使用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，所以两个下拉值都是禁用的，但我应该在哪里传递?

如果用户选择apple，那么在第二个下拉菜单中apple将被禁用，我想使用Javascript或jQuery来实现。

小提琴: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);
});

不管你在两个下拉菜单中有多少个选项

试一下:

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/

<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>
相关文章：