选择下拉选项时在表单中添加输入字段答案

【问题标题】：Add input fields in form when dropdown option selected选择下拉选项时在表单中添加输入字段
【发布时间】：2015-09-26 07:16:37
【问题描述】：

如何在表单中动态添加字段

所以我的表格看起来像：

<form action="/reservation-add" method="post">
<select id="dropdownlist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input></input>
</form>

如果选择例如 3，它应该附加 3 个新输入（可以是数组以获取所有值）我知道我必须使用 javascript，但我不知道如何。

【问题讨论】：

需要添加文本输入吗？
是的，它将包含名称
api.jquery.com/change, api.jquery.com/append
没有</input>！
@PraveenKumar 嗯，没错，它只是为了显示它应该附加在哪里

标签： javascript php jquery html forms

【解决方案1】：

这样使用：

$("#dropdownlist").change(function () {
    var numInputs = $(this).val();
    for (var i = 0; i < numInputs; i++)
        $("#inputArea").append('<input name="inputs[]" />');
});

还有另一个div，ID 为“inputArea”：

<div id="inputArea"></div>

片段

$("#dropdownlist").change(function () {
  var numInputs = $(this).val();
  for (var i = 0; i < numInputs; i++)
    $("#inputArea").append('<input name="inputs[]" />');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="dropdownlist">
  <option>Select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<div id="inputArea"></div>

【讨论】：

谢谢！！我刚刚添加了清理以前从其他帖子中选择的内容，它按我的想法工作
由于您使用的是.append，即使您更改了下拉选择，它也不会摆脱之前的框。您可以使用 .empty().append() 清空元素或使用 .html('<input name="inputs[]" />) 覆盖 HTML 元素

【解决方案2】：

<form action="/reservation-add" method="post" id="appendform">
  <select id="dropdownlist">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<input></input>
</form>

jQuery 代码

  $(document).ready(function ()
 {
  $('#dropdownlist').on('change',function ()
  {
    var howmuch = $(this).val();
    var appendhtml = '';
    for (i = 0; i < howmuch; i++)
    { 
        appendhtml+= "<input name="+i+" value="">";
    }
    $('.appendform').append(appendhtml);
  });
 });

【讨论】：

【解决方案3】：

$("#dropdownlist").on("change",function(e){
    for(i=0; i < $(this).val() ;i++){
        $("form").append($("<input type='text'/>"));
    }
})

【讨论】：

【解决方案4】：

试试这个

<script>
    function fireChange(val) {
    var form = document.forms[0];
        if(val) {
            for (var i = 0; i < val; i++) {
                var in = document.createElement('input');
                form.appendChild(in);
            }
        }
    }
</script>
<form action="/reservation-add" method="post" onchange="fireChange(this.value)">
<select id="dropdownlist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input></input>
</form>

【讨论】：

【解决方案5】：

Step 1---添加id到form
Step 2---使用jquery onchange方法，代码如下

<form action="/reservation-add" method="post" id="myForm">
    <select id="dropdownlist">
        <option value="1"></option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

$('#dropdownlist').on("change",function() {
          for(var i=0;i&lt;this.value;i++)
          {
              $("#myForm").append("<input type='text' name='myname[]'/>
               <br>");
          }
  });

【讨论】：

【解决方案6】：

为了解决在初始下拉选择后添加更多输入字段的问题（如果用户在初始选择后改变主意），此页面上的所有答案都是这种情况。请参阅下面的解决方案：

$("#dropdownlist").change(function () {
  $("#inputArea > :input").remove();
  var numInputs = $(this).val();
  for (var i = 0; i < numInputs; i++)
    $("#inputArea").append('<input name="inputs[]" />');
});

【讨论】：

@binar Tx，认为它可能对某人有所帮助。请为我的回答点赞。

【解决方案7】：

通过纯JavaScript，你可以这样做；

<script>
document.getElementById("dropdown").onchange = function() {
    document.querySelector("#inputarea").innerHTML = '';
    for(var i = 0; i < document.getElementById("dropdown").value; i++) {
        var input = document.createElement("input");
        input.name = 'input_name';
        input.type = 'text';
        document.getElementById("inputarea").append(input);
    }
}
</script>

这里是html；

<body>
<form>
    <select id="dropdown">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>
<div id="inputarea"></div>
</body>

【讨论】：