Question

正如您将从下面的小提琴中看到的那样，我正在尝试但需要更多的练习，并且请一些帮助，请。

我有一个加载最多4个div的选择框。我有第二个选择框，只有在第一个选择框中选择了多个选项时才会显示。

我的问题是，当我将第一个选择框更改为零时，虽然它删除了第二个选择框，但它不会删除由它加载的div。

任何建议请。

HTML

<html>
<div>
 <label>Adults</label>
  <select id='Adults'>
   <option value="0" selected="selected">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
  </select>
 </div>
 <div style='display:none;' id='1Adult'>First Adult information</div>
 <div style='display:none;' id='2Adults'>Second Adult information</div>
 <div style='display:none;' id='3Adults'>Third Adult information</div>
 <div style='display:none;' id='4Adults'>Fourth Adult information</div>
 <div style='display:none;' id='ChildSelector'>
  <label>Children</label>
   <select id='Children'>
   <option value="0" selected="selected">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
 </select>
</div>
<div style='display:none;' id='1Child'>First Child information</div>
<div style='display:none;' id='2Children'>Second Child information</div>
<div style='display:none;' id='3Children'>Third Child information</div>
</html>

JS $（文件）。就绪（函数（）{ $（'#Adults'）。on（'change'，function（）{ if（this.value =='0'） { $（ “＃1Adult”）隐藏（）。 $（ “＃2Adults”）隐藏（）。 $（ “＃3Adults”）隐藏（）。 $（ “＃4Adults”）隐藏（）。 $（ “＃ChildSelector”）隐藏（）。 } 否则if（this.value =='1'） { $（ “＃1Adult”）显示（）。 $（ “＃2Adults”）隐藏（）。 $（ “＃3Adults”）隐藏（）。 $（ “＃4Adults”）隐藏（）。 $（ “＃ChildSelector”）显示（）。 } 否则if（this.value =='2'） { $（ “＃1Adult”）显示（）。 $（ “＃2Adults”）显示（）。 $（ “＃3Adults”）隐藏（）。 $（ “＃4Adults”）隐藏（）。 $（ “＃ChildSelector”）显示（）。 } 否则如果（this.value =='3'） { $（ “＃1Adult”）显示（）。 $（ “＃2Adults”）显示（）。 $（ “＃3Adults”）显示（）。 $（ “＃4Adults”）隐藏（）。 $（ “＃ChildSelector”）显示（）。 } 否则如果（this.value =='4'） { $（ “＃1Adult”）显示（）。 $（ “＃2Adults”）显示（）。 $（ “＃3Adults”）显示（）。 $（ “＃4Adults”）显示（）。 $（ “＃ChildSelector”）显示（）。 } }）; }）; $（文件）。就绪（函数（）{ $（'＃Children'）。on（'change'，function（）{ if（this.value =='0'） { $（ “＃1名儿童”）隐藏（）。 $（ “＃2Children”）隐藏（）。 $（ “＃3Children”）隐藏（）。 } 否则if（this.value =='1'） { $（ “＃1名儿童”）显示（）。 $（ “＃2Children”）隐藏（）。 $（ “＃3Children”）隐藏（）;

  }
  else if ( this.value == '2')
  {
    $("#1Child").show();
    $("#2Children").show();
    $("#3Children").hide();

  }
  else if ( this.value == '3')
  {
    $("#1Child").show();
    $("#2Children").show();
    $("#3Children").show();

  }

 });
 });

http://jsfiddle.net/PeteInSpain/ytg7hey7/2/

Answer 1

使用

remove（）以及..

$("#ChildSelector").hide().remove();

http://api.jquery.com/remove/

Answer 2

一种非常脏的方法是将Children select元素的值设置回0，因此它将删除元素本身。

if ( this.value == '0')
{
    //...
    $("#Children").val(0); //Set it back to 0
    $("#Children").trigger("change"); //Call the listeners
}

或者您可以重构HTML，以便

<div style='display:none;' id='1Child'>First Child information</div>
<div style='display:none;' id='2Children'>Second Child information</div>
<div style='display:none;' id='3Children'>Third Child information</div>

块位于<div style='display:none;' id='ChildSelector'>

内

当第一个onload出现触发时，如何销毁第一个js onload

2 个答案: