Question

我有两个动态下拉列表，但下拉列表的值和选项都相同。如果用户选择＆＃39; apple＆＃39;从第一次下拉菜单开始，第二次下拉菜单的苹果选项将被禁用（使用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>

根据第一个下拉列表禁用第二个下拉选项

3 个答案: