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>

从下拉列表中选择选项时，如何使用jQuery

2 个答案: