jQuery基於在下拉菜單中選擇的數字動態創建輸入字段？

Question

我試圖完成沿此線的東西：

http://devblog.jasonhuck.com/assets/infiniteformrows.html

但是......我想顯示一個下拉選擇字段，其值1到20，並根據其價值被選定該字段是我將顯示給用戶以填寫頁面的多少個輸入字段（當然，無需刷新）。

因此，如果我在下拉框中選擇4（最初沒有顯示輸入字段，因爲默認值應爲0），正下方有4行輸入字段名稱&電子郵件應創建，標識符等（用於存儲到mysql）。

對於我的生活，我找不到任何人做這件事的例子，所以我想我會在這裏提出一個小挑戰。

在此先感謝！

Answer 1

您需要做的就是找出當用戶更改下拉列表時選擇哪個數字，然後遍歷該數字，爲每次迭代創建兩個輸入字段。

$("#selectBox").change(function() { 
    var htmlString = ""; 
    var len = $("options:selected", this).val(); 
    for (var i = 0; i < len; i++) { 
    htmlString += "<input type='text' class='email'>"; 
    htmlString += "<input type='text' class='name'>"; 
    } 
    $("#outputArea").html(htmlString); 
} 

你甚至可能要使它更聰明，所以它會檢查多少輸入字段你已經有了，然後只作儘可能多的需要，或去掉一些。這樣的話，這將是一個快一點（：

Answer 2

這將在頁面上選擇後插入一個文本框。每次數字改變時它都會被觸發。

var idFun = 0; 
$('select').change(function() { 
    var end=$(this).val(); 
    for (var i=0;i<end;i++) { 
    $('<div><input id="fun' + (idFun++) + ' type="text" ></div>').appendTo($('#myinputs')); 

    } 
}); 

HTML：

<select> 
    ... 1 to 20 here 
</select> 
<div id="myinputs"></div> 

希望這有助於。

Answer 3

真正sollution：

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#AantalAntw").change(function() { 
      var htmlString = ""; 
      var len = $("#AantalAntw").val(); 
      for (var i = 0; i < len; i++) { 
       htmlString += "<input type='text' class='email'>"; 
       htmlString += "<input type='text' class='name'>"; 
      } 
      alert(htmlString); 
      $("#antwblok").html(htmlString); 
     }); 
    }); 

</script>