根据选项选择添加表单字段

Question

我有一个表单，我必须根据在选择框中选择的选项添加表单字段

我所做的是创建所有表单字段并基于选择显示隐藏字段，但是有没有简化的方法来做到这一点

<select name="child" id="child">
  <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 id="age1">                                                       
  <select name="age1" id="age1">
  //options
  </select>
</div>
<div id="age2">                                                  
   <select>
   //options
   </select>
</div>
<div id="age3"> 
  <select>
  //options
  </select>
</div>

这是我的 jquery

$('#child').change(function() {
 if( $(this).val() == 0 ) {     
   $("div#age1").hide();
   $("div#age2").hide();
   $("div#age3").hide();
   $("div#age4").hide();    
 }

 if( $(this).val() == 1 ) {
   $("div#age1").show();
   $("div#age2").hide();
   $("div#age3").hide();
   $("div#age4").hide();

 }
 if( $(this).val() == 2 ) {
   $("div#age1").show();
   $("div#age2").show();
   $("div#age3").hide();
   $("div#age4").hide();
 }

 if( $(this).val() == 3 ) {
   $("div#age1").show();
   $("div#age2").show();
   $("div#age3").show();
   $("div#age4").hide();
 }
 if( $(this).val() == 4 ) {
   $("div#age1").show();
   $("div#age2").show();
   $("div#age3").show();
   $("div#age4").show();
 }
});

如何以简化的方式做到这一点以及如何为此获得后期价值

Answer 1

试试这个：

<select name="child" id="child">
<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 class="myage" id="age1">                                                       
<select name="age1" id="age_1">
  //options
</select>
 </div>
 <div class="myage" id="age2">                                                  
    <select>
     //options
    </select></div>
    <div class="myage" id="age3"> <select>
     //options
    </select></div>

你的 JS：

$(".myage:eq(0)").show();
$('#child').change(function() {
  $(".myage").hide();
  $(".myage:eq("+$(this).val()+")") .show();
});

使用类而不是 ID :)

Answer 2

与 Prashant 相同的基本方法 - 但不需要使用 eq().. div 的 id 都与选择列表的值匹配 - 请注意，当前代码中的第一个选择列表具有相同的 id它的父 div。这将导致一个问题，但以下将解决它。

所有这一切都是在 #child 选择列表的变化上 - 触发所有 div 隐藏（注意 CSS 中的 display none 以最初隐藏它们）然后显示与 child 的年龄 + 值匹配的那个。我自己实际上不会这样做，但考虑到你有这个工作的代码。我还在年龄选择列表中添加了选项，以便在您更改#child 列表时为它们提供一些显示。

正如我所说，我不建议这样做 - 我建议根据选择将新的选择列表附加到表单的末尾 - 这样您就不会将所有选择列表都放在那里而您没有提交表单时，不必担心从隐藏列表之一提交选定的值。只是一个想法。

$('#child').change(function() {
  $("div").hide();
  $("#age"+$(this).val()).show();
});

div{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="child" id="child">
<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 id="age1">                                                       
<select name="age1">
 <option value="a">a</option>
   <option value="b">b</option>
</select>
 </div>
 <div id="age2">                                                  
    <select name="age2">
  <option value="c">c</option>
   <option value="d">d</option>
    </select></div>
    <div id="age3"> 
      <select  name="age2">
       <option value="e">e</option>
       <option value="f">f</option>
    </select></div>
    <div id="age4"> <select>
     <option value="g">g</option>
   <option value="h">h</option>
    </select></div>