Question

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

我需要使用哪种编程语言？我在整个网站上使用PHP。

Answer 1

以下是使用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>

这是你的任务的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 />"));
      }
  });

您可以按如下方式简化此代码：

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

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

这是一个工作小提琴示例：http://jsfiddle.net/melih/VnRBm/

您可以阅读有关jQuery的更多信息：http://jquery.com/

Answer 2

我会选择jQuery。

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

http://api.jquery.com/change/

http://api.jquery.com/empty/

http://api.jquery.com/append/

Answer 3

在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);
    }
}

选择更改事件，请查看此处：javascript select input event

Answer 4

你最有可能使用javascript（jquery就是这个），这里有一个例子来向你展示如何让你走上正轨

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

javascript可根据Mutahhir回答

动态创建选定数量的输入

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

如何动态创建输入框？

4 个答案: