Wie <select> Option basierend auf anderen <select> Option deaktiviert deaktivieren?

Question

Es gibt 2 Combobox mit den gleichen Optionen sowie den Wert. Wenn der Benutzer Python in der ersten Combobox ausgewählt hat, wird die Python-Option in der zweiten Combobox deaktiviert. Aber wenn ich das versuche, würde es nicht funktionieren. Hier ist mein Code:

HTML:

<select name="first_combobox"> 
    <option value="python">Python</option> 
    <option value="ruby">Ruby</option> 
    <option value="lua">Lua</option> 
</select> 

<select name="second_combobox"> 
    <option value="python">Python</option> 
    <option value="ruby">Ruby</option> 
    <option value="lua">Lua</option> 
</select> 

JS (jQuery):

$("select[name=first_combobox]").change(function(){ 
    if ($("select[name=first_combobox]").val() === $("select[name=second_combobox]").val()) { 
     $("select[name=second_combobox] option[value=" + $("select[name=first_combobox]").val() + "]").attr("disabled", "disabled"); 
    } else { 
     $("select[name=second_combobox] option[value=" + $("select[name=first_combobox]").val() + "]").removeAttr("disabled"); 
    } 
}); 

Kann jemand mir helfen, dieses Problem zu lösen? Dank vor

Answer 1

Dies sollte für Sie arbeiten:

$("select[name=first_combobox]").change(function(){ 
    $("select[name=second_combobox] option").removeAttr("disabled"); 
    $("select[name=second_combobox] option[value=" + $("select[name=first_combobox]").val() + "]").attr("disabled", "disabled"); 
}); 

Fiddle

Answer 2

Dies sollte genau das tun wollen, was Sie brauchen. Ich hoffe es hilft!

$(document).ready(function(){ 
 
\t \t $("#theSelect").change(function(){ 
 
\t \t \t $("select[name=second_combobox] option").removeAttr("disabled"); 
 
\t \t \t $("select[name=second_combobox] option[value=" + $("select[name=first_combobox]").val() + "]").attr("disabled", "disabled"); 
 
\t \t }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<select id = "theSelect" name="first_combobox"> 
 
\t <option value="python">Python</option> 
 
\t <option value="ruby">Ruby</option> 
 
\t <option value="lua">Lua</option> 
 
</select> 
 

 
<select id="theSelect" name="second_combobox"> 
 
\t <option value="python">Python</option> 
 
\t <option value="ruby">Ruby</option> 
 
\t <option value="lua">Lua</option> 
 
</select>