基于用户输入创建多个表单项

create a number of form items based on user input

本文关键字：创建 表单 输入 于用户 用户      更新时间：2023-09-26

我有一个由用户输入的值。如何创建一定数量的表单项供用户填写，无论是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来检索值。

在循环中给出唯一id inputnum

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

因此id将像uniqueid0、uniqueid1等一样是唯一的。

然后你可以访问它，使用唯一的id，使用类似的事件

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

使用Inspect元素Fiddle进行检查，您将获得唯一的id，在本例中，我对1进行了硬编码，但相同的值将在代码中循环。

此代码将完成

注意：我将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>');
      } 
  });
});
相关文章：