根據用戶輸入創建許多表單項

Question

我有一個由用戶輸入的值。 如何使用javascript / jQuery或PHP創建一定數量的表單項供用戶填寫？

例如。

<select id = "Fooinput" name = "Foo">
    <option value = "0">0</option>
    <option value = "1">1</option>
    <option value = "2">2</option>
    <option value = "3">3</option>
    <option value = "4">4</option>
</select>
<button id ="fooclick">Button</button>
<div id="fillout"></div>

和類似的jQuery

$(document).ready(function(){
  var inputnum = $("Fooinput").val();
  $("#foobutton").click(function(){
      for (var i=0; i<inputnum;i++){
          $("#fillout").append('<select id="uniqueid">OPTIONS</select>');
      } 
  });
}); 

我很高興看到jQuery或PHP的解決方案，但我不明白以后如何通過為所有選擇框賦予唯一的ID來檢索值。

Answer 1

在循環中提供唯一的id inputnum

$("#fillout").append('<select id="uniqueid'+inputnum+'" class="Dropdown">OPTIONS</select>');

因此，id將是唯一的，例如uniqueid0 ， uniqueid1等。

然后，您可以使用唯一ID，Use event like

$(".Dropdown").click(function(){
    $(this).attr(id);
});

使用Inspect元素Fiddle進行檢查，您將獲得唯一的id，在這種情況下，我將對其進行硬編碼1但相同的值將在您的代碼中循環。

Answer 2

這段代碼可以解決問題

注意 ：我移動了var inputnum = $("Fooinput").val(); 在點擊事件內部，因為作為OP，您將獲得頁面加載而非點擊帶來的價值。

 $(document).ready(function(){

  $("#foobutton").click(function(){
      var inputnum = $("Fooinput").val();
      for (var i=0; i<inputnum;i++){
          $("#fillout").append('<select id="uniqueid-'+$i+'">OPTIONS</select>');
      } 
  });
});