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

您甚至可能想让它变得更智能，因此它会检查您已有的输入字段数量，然后仅根据需要创建多个输入字段，或者删除一些输入字段。这样，速度会快一点(: