Question

我有一个下拉框，允许用户选择他们有多少输入。例如，也许他们想要输入一个单词，他们会选择一个单词。如果他们想输入两个单词，他们会选择两个单词。

根据他们选择的选项，我想创建下面的许多文本框，我也可以参考使用其他脚本（例如通过索引）。

有办法做到这一点吗？

Answer 1

当然，使用Javascript来操纵DOM。在它最简单的形式你可以做类似的事情：

document.getElementById('someDiv').innerHTML += "<label>Label:</label><input type='file' value='' />";

或使用类似JQuery的内容：

var new_field = " <label>SomeLabel: </label> <input type = "text" / >";
$("#sonmeSelector").before(new_field);

Answer 2

你想要这样的东西（用jQuery 1.4.4完成）：

<强> HTML

<html>
  <head>
    <title>Multiple Input</title>
  </head>
  <body>
    <select id="amount" name="amount" onchange="addInput();">
        <option value="1" >1</option>
        <option value="2" >2</option>
        <option value="3" >3</option>
    </select>
    <div id="inputs">
    </div>
  </body>
</html>

<强> JS

function addInput(){
  var amount = $('#amount').val();
  var inputs = $('#inputs').empty();
  for(i = 0; i < amount; i++) {
    inputs.append('<input type="text" name="input[' + i + ']" /> ');
  }
}

另请查看我的jsfiddle http://jsfiddle.net/8KqUt/

创建多个输入字段

2 个答案: