Javascript 基于第一个下拉菜单禁用第二个下拉菜单选项

我有两个动态下拉列表，但两个下拉列表的值和选项都是相同的。我想要的是，如果用户从第一个下拉列表中选择“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>

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

如果用户选择apple，则在第二个下拉列表中，apple将被禁用，我想使用Javascript或jQuery执行此操作。

Fiddle:

<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>

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

我还将第二个下拉列表中的第一个元素初始化为禁用，因为在第一个下拉列表中默认选择了该元素

按原样使用jquery：

HTML:

无论您在两个下拉列表中有多少个选项，这项功能都应该仍然有效

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

我还将第二个下拉列表中的第一个元素初始化为禁用，因为在第一个下拉列表中默认选择了该元素

按原样使用jquery：

HTML:

无论在这两个下拉列表中有多少个选项，这都应该仍然有效。请尝试以下方法：

HTML:

您可以在此处看到一个工作示例：

试试这个：

HTML:

您可以在此处看到一个工作示例：

---

---

到目前为止您尝试了什么？请查看我编辑的代码！代码中的name属性是双精度的。您应该尝试jqueys$'YourSelect'.changefunction{alert'first select changed'；}；我建议您不要通过抛出消息而不是禁用选项来让用户选择该选项。到目前为止您尝试了什么？请参阅我编辑的代码！代码中的name属性是双精度的。您应该尝试jqueys$'YourSelect'.changefunction{alert'first select changed'；}；我建议您不要通过抛出消息而不是禁用选项来让用户选择该选项。请注意，此函数还可以从第二个select元素重新启用在第一个select元素上未选中的选项。请注意，此函数还可以从第二个select元素重新启用在第一个select元素上未选中的选项一个。可能您必须将id添加到您的选择中或将IDS SELECTION更改为name SELECTION可能您必须将id添加到您的选择中或将IDS SELECTION更改为name SELECTION谢谢亲爱的。。。但在第一次选择时，它不起作用。在那之后，它工作得很好。你的意思是，你想让它在第二个选项中自动选择一个不冲突的项目，并且只是禁用该选项？它肯定能做到这一点。谢谢亲爱的。。。但在第一次选择时，它不起作用。在那之后，它工作得很好。你的意思是，你想让它在第二个选项中自动选择一个不冲突的项目，并且只是禁用该选项？它肯定能做到这一点。

<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>

<!-- 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>

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

<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>

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