根据下拉列表中选择的数字显示字段数量答案

【问题标题】：show no of fields depending on number selected in dropdown根据下拉列表中选择的数字显示字段数量
【发布时间】：2014-08-25 08:38:52
【问题描述】：

我在看这个帖子：Using jQuery to dynamically add form fields (or fieldsets) based on a dropdown box value

没有更简单的方法吗？

我的代码：

 <tr>
   <td valign="top">
   <label for="children">No. of Minor Children*</label>
   </td>
   <td>
     <select id="nochildren" name="nochildren" onchange="displayfields(this.value)">
        <option value="1">0</option>
        <option value="1">1</option>
        <option value="2">2</option>  
        <option value="3">3</option>
        <option value="4">4</option>
     </select>
   </td>
   <br />               
   <option value="<?php echo $row_list['nochildren']; ?>">
     <?php if($row_list['nochildren']==$select){ echo $row_list['nochildren']; } ?>
   </option>                   

  <script language="JavaScript">                               
     $(document).ready(function(){
        $('#nochildren').change(function(){
           $("#child").show();  
           displayfields($(this).val());
        });
     });
     function displayfields(val)
    {           
      for (var i=1 ; i<val; val++)
      {        
         alert(i);                                                                    
         $("#child"+i).show();                          
      }
    }           
    </script>   
 </tr>  
 <div id="child">
   <tr>
     <td valign="top">
       <label for="names">Child Full names*</label>
     </td>                  
     <td valign="top">
      <input  type="text" name="childname" maxlength="50" size="30"></input>  
     </td>
    </tr>   
 </div>

如果没有孩子不显示 div 如果 4 个孩子显示 4 个 div 标签

【问题讨论】：

请加个小提琴供参考。
小提琴？那是什么？我已经有 2 年没来这里了，哈哈
在谷歌上搜索小提琴。是一个用来托管代码sn-ps的站点，供参考和分享，可以修改和操作
或者我们可以将您链接到该网站：JS Fiddle。 @Saksham：如果您要求某人做某事，而他们清楚地解释说他们不知道那是什么，您为什么不让事情变得简单，而不是告诉他们使用 Google 来找到它？
LOL 不再是开发人员了，帮我的老板帮个忙，为我们的家庭法律诊所网站添加一些功能。我现在是候选人律师。所以不记得如何编码了大声笑有人可以告诉我如何让我的代码正确吗？将不胜感激:)

标签： javascript jquery html

【解决方案1】：

试试这个：

<script type="text/javascript">

  $(document).ready(function(){
     $('#nochildren').change(function(){

        //-------
        // Here add your code to hide all div's
        //-------

        displayfields($(this).val());
     });
  });

   function displayfields(val)
   {                                                              
      for (var i=1 ; i<val; val++)
      {        
          alert(i);                                                                    
          $("#child"+i).show();                          
      }
   }   
</script>

【讨论】：

感谢您的编辑，但我必须将第一部分放在我的代码中的哪个位置？
很抱歉，但它不是很有效。我会更新顶部，这样你就可以看到我现在的情况了:)

【解决方案2】：

看到这个Fiddle。我没有包含它的样式，它只是一个核心实现。

下面是我正在使用的 jQuery

$(function(){
    var inputString="<input type='text'>";
    $('#selectBox').on('change',function(){
        $('#result').html('');
        for(var i = 0;i<$('#selectBox :selected').val();i++)
        {
            $('#result').append(inputString);
        }
    });
});

【讨论】：