Javascript 如何动态创建输入框？

我想使用HTML下拉框的值，并在下面创建相应数量的输入框。我希望我能在飞行中实现这一点。此外，如果值发生更改，则应适当添加或删除

---

我需要用什么编程语言来完成这项工作？我在整个网站上使用PHP。

用javascript做起来很简单。假设您有一个数字和一个要插入的html元素。您可以使用

document.getElementById

或其他类似方法获取父html元素。该方法假定

parentElement

的唯一子元素将是这些输入框。下面是一些示例代码：

function addInput = function( number, parentElement ) {
    // clear all previous children
    parentElement.innerHtml = "";
    for (var i = 0; i < number; i++) {
        var inputEl = document.createElement('input');
        inputEl['type'] = 'text';
        // set other styles here
        parentElement.appendChild(inputEl);
    }
}

function addInput=函数（数字，父元素）{
//清除所有以前的子项
parentElement.innerHtml=“”；
对于（变量i=0；i

---

对于select change事件，请看这里：

我会选择jQuery

首先，查看change（）、empty（）和append（）

---

下面是一个使用jQuery实现目标的示例：

假设您有以下html：

  <div>
    <select id="input_count">
      <option value="1">1 input</option>
      <option value="2">2 inputs</option>
      <option value="3">3 inputs</option>
    </select>
  <div>
  <div id="inputs"> </div>

1输入
2输入
3输入

这是您任务的js代码：

  $('#input_count').change(function() {
      var selectObj = $(this);
      var selectedOption = selectObj.find(":selected");
      var selectedValue = selectedOption.val();

      var targetDiv = $("#inputs");
      targetDiv.html("");
      for(var i = 0; i < selectedValue; i++) {
        targetDiv.append($("<input />"));
      }
  });

$（'#输入_计数'）。更改（函数（）{
var selectObj=$（此值）；
var selectedOption=selectObj.find（“：selected”）；
var selectedValue=selectedOption.val（）；
var targetDiv=$（“#输入”）；
html（“”）；
对于（变量i=0；i

您可以将此代码简化如下：

  $('#input_count').change(function() {
      var selectedValue = $(this).val();

      var targetDiv = $("#inputs").html("");
      for(var i = 0; i < selectedValue; i++) {
        targetDiv.append($("<input />"));
      }
  });

$（'#输入_计数'）。更改（函数（）{
var selectedValue=$（this.val（）；
var targetDiv=$（“#输入”）.html（“”）；
对于（变量i=0；i

下面是一个工作小提琴的例子：

---

您可以阅读有关jQuery的更多信息：

您最有可能使用javascript（这就是jQuery），下面是一个示例，向您展示如何使用javascript来实现您的目标

 <select name="s" onchange="addTxtInputs(this)" onkeyup="addTxtInputs(this)">
 <option value="0">Add</option>
 <option value="1">1</option>
 <option value="3">3</option>
 <option value="7">7</option>
 </select>
 <div id="inputPlaceHolder"></div>

---

选择更改事件处理如何？只需在下拉列表中执行

$（this）.val（）

即可获得所选值，无需

.find（':selected'）

@DidierG。是的，但是当我那样做的时候，我犯了一个错误，我想还有其他问题。现在我试过了，效果很好。我将相应地更新简化答案。谢谢。谢谢，这很有帮助！当您更改所选金额时，是否有可能将值保留在框中。例如，如果我选择了4个，然后填写1+2框，然后将其更改为2，数据保留在1和2框中？

<script>
function addTxtInputs(o){

  var n = o.value; // holds the value from the selected option (dropdown)
  var p = document.getElementById("inputPlaceHolder"); // this is to get the placeholder element
  p.innerHTML = ""; // clears the contents of the place holder each time the select option is chosen.

// loop to create the number of inputs based apon `n`(selected value) 
   for (var i=0; i < n; i++) { 
       var odiv = document.createElement("div"); //create a div so each input can have there own line
       var inpt = document.createElement("input");
       inpt['type'] = "text"; // the input type is text
       inpt['id'] = "someInputId_" + i; // set a id for optional reference 
       inpt['name'] = "someInputName_" + i; // an unique name for each of the inputs

       odiv.appendChild(inpt); // append the each input to a div
       p.appendChild(odiv); // append the div and inputs to the placeholder (inputPlaceHolder)
     }
 }
</script>