当从下拉菜单中选择选项时，如何使用jQuery将所选选项隐藏到另一个下拉菜单中

Question

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

我有很多下拉菜单，其中所有下拉菜单都具有相同的选项值，但是当用户选择选项时，该选择的值应在其他下拉菜单中隐藏或删除，并且如果用户更改了该选项，则该先前选择的选项应进入该选项，而当前选择的选项应隐藏于其中其他下拉菜单。 当从下拉菜单中选择选项时，如何将所选选项隐藏到另一个下拉菜单中。我试图找到解决方案，但没人能正常工作。

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>