如何根據選擇的其他<select>選項禁用<select>選項？

Question

有兩個組合框具有相同的選項以及值。所以當用戶在第一個組合框中選擇python時，第二個組合框中的python選項將被禁用。但是，當我嘗試這是行不通的。這裏是我的代碼：

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"); 
    } 
}); 

有人可以幫我解決這個問題？由於之前

Answer 1

這應該爲你工作：

$("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

這應該做的正是要你所需要的。希望能幫助到你！

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