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

Posted 2023-02-24

【中文标题】选择下拉选项时在表单中添加输入字段

【英文标题】：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 嗯，没错，它只是为了显示它应该附加在哪里

【参考方案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到formStep 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>