Question

我正在尝试按照以下方式完成某些事情：

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

但是...我想显示一个下拉选择字段，值为1到20，并且取决于在该字段中选择的值，即我将向用户显示的页面上填写的输入字段数量（当然没有提神。）

因此，如果我在下拉框中选择4（最初没有显示输入字段，因为默认值应为0），正好在其下面4行输入字段用于Name＆amp;应该创建电子邮件，所有电子邮件都有唯一的标识符等（用于存储到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

真正的溶解：

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

jQuery根据下拉菜单中选择的数字动态创建输入字段？

3 个答案: