當從下拉菜單中選擇選項，那麼如何使用jQuery

Question

隱藏

<select> 
 
    <option value = "volvo" > Volvo < /option> 
 
    <option value = "saab" > Saab < /option> 
 
    <option value = "vw" > VW < /option> 
 
    <option value = "audi"> Audi < /option> 
 
</select>

我有很多下拉式選單，選擇選項進入另一個下拉在具有相同的期權價值，但所有下拉列表中，當用戶選擇選項，然後選定值應該隱藏或在其他下拉菜單中刪除，如果用戶更改了該選項應該進入該選項的選項，並且當前選擇的選項應隱藏到其他下拉菜單中。 當從下拉菜單中選擇選項，然後如何隱藏選定的選項到另一個dropdown.I試圖找到解決方案，但沒有人的代碼正常工作。

Answer 1

3個選擇框：

<select id="1"> 
    <option value = "volvo" > Volvo </option> 
    <option value = "saab" > Saab </option> 
    <option value = "vw" > VW </option> 
    <option value = "audi"> Audi </option> 
</select> 
<select id="2"> 
    <option value = "volvo" > Volvo </option> 
    <option value = "saab" > Saab </option> 
    <option value = "vw" > VW </option> 
    <option value = "audi"> Audi </option> 
</select> 
<select id="3"> 
    <option value = "volvo" > Volvo </option> 
    <option value = "saab" > Saab </option> 
    <option value = "vw" > VW </option> 
    <option value = "audi"> Audi </option> 
</select> 

你的js代碼：

m_val=""; 
m_text=""; 
$(document).ready(function(){ 
    val = $("select:first").val(); 
    text = $("select:first option:selected").text(); 
    $("select:not(:first) option[value='"+val+"']").remove(); 

    m_val=val; 
    m_text=text; 

    $("select").change(function(){ 
    val = $(this).val(); 
    id = $(this).attr("id"); 
    text = $(this).text(); 

    $("select[id!='"+id+"'] option[value='"+val+"']").remove(); 

    $("select").each(function(index) { 
     i = $(this).attr("id"); 
     if($("select[id='"+i+"'] option[value='"+m_val+"']").length==0){ 
     $(this).append("<option value = '"+m_val+"' > "+m_text+"</option> "); 
     } 
    }); 

    m_val=val; 
    m_text=text; 
    }); 
}); 

這裏是工作提琴：https://jsfiddle.net/1krwzL4j/

Answer 2

事件處理程序添加到選擇框，然後尋找其他選擇框並刪除適當的選項元素。另外，將選定的值存儲爲數據，以便我們可以將其恢復;

$("select").change(function(){ 
 
    var selVal = $(this).val(); 
 
    var prevVal = $(this).data("selVal"); 
 
    
 
    if(selVal !== prevVal) 
 
    { 
 
     //Take out the new select 
 
     $("select").not(this).find("option[value='" + selVal + "']").remove(); 
 
    
 
     //Store selcted val so we can put it back 
 
     $(this).data("selVal", selVal); 
 
     
 
     //Get the previously selected option... clone it and append it to the others 
 
     var newOption = $(this).find("option[value='" + prevVal + "']").clone(); 
 
     $("select").not(this).append(newOption);  
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select> 
 
    <option value = "volvo" > Volvo </option> 
 
    <option value = "saab" > Saab </option> 
 
    <option value = "vw" > VW </option> 
 
    <option value = "audi"> Audi </option> 
 
</select> 
 

 
<select> 
 
    <option value = "volvo" > Volvo </option> 
 
    <option value = "saab" > Saab </option> 
 
    <option value = "vw" > VW </option> 
 
    <option value = "audi"> Audi </option> 
 
</select> 
 
<select> 
 
    <option value = "volvo" > Volvo </option> 
 
    <option value = "saab" > Saab </option> 
 
    <option value = "vw" > VW </option> 
 
    <option value = "audi"> Audi </option> 
 
</select> 
 
<select> 
 
    <option value = "volvo" > Volvo </option> 
 
    <option value = "saab" > Saab </option> 
 
    <option value = "vw" > VW </option> 
 
    <option value = "audi"> Audi </option> 
 
</select>