Question

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

我所做的是创建所有表单字段并基于选择show hide字段，但有没有简化的方法来执行此操作

<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();
});

使用Class而不是ID：）

Answer 2

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

所有这一切都取决于#child选择列表的更改 - 触发所有div隐藏（注意CSS中的display none最初隐藏它们），然后显示匹配child的age + value的那个。我自己也不会这样做，但考虑到你的代码，你有这个工作。我还在年龄选择列表中添加了选项，以便在更改#child列表时为其提供显示内容。

正如我所说，我不建议这样做 - 我建议根据选择在表格的末尾添加一个新的选择列表 - 这样你就没有所有的选择列表只是坐在那里而你没有＆＃ 39;当您提交表单时，不得不担心从其中一个隐藏列表中提交所选值。只是一个想法。

＆＃13;

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

＆＃13;

div{display:none}

＆＃13;

<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>

＆＃13;

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

2 个答案: