选择下拉选项时，在表单中添加输入字段 [英] Add input fields in form when dropdown option selected

问题描述

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

所以我的表单看起来像：

 < form action =/ reservation-addmethod =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个新的输入（可以是数组来取所有的值）I知道我必须使用JavaScript，但我不知道如何。

解决方案

使用这种方式：

$ b $

  $（＃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> 
  

片段

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js> < / script>< 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>< div id =inputArea>< / div>  

How to add fields in form dynamically

so my form looks like :

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

If selected e.g 3 it should append 3 new inputs (could be array to take all of values ) I know that I have to use javascript but I don't know how.

解决方案

Use this way:

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

Have another div, with the ID "inputArea":

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

Snippet

$("#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>

这篇关于选择下拉选项时，在表单中添加输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！