根據第一個下拉菜單禁用第二個下拉菜單選項

Question

我有兩個動態下拉菜單，但下拉菜單的值和選項都相同。 我想要的是，如果用戶從第一個下拉列表中選擇“ apple”，則第二個下拉列表的apple選項將被禁用（使用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>