Question

我正在看这篇文章：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标签

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

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

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

2 个答案: