Question

所以我在我的页面上选择并根据用户选择我想向他显示大量的输入字段，然后在php脚本中用它做一些事情。

看起来像这样：

https://i.imgur.com/RlYySko.png

如果用户选择3，则在没有重新加载页面的情况下，如果2然后2等，则应出现3个输入字段。这里应该使用什么js或什么？

Answer 1

假设您已经存在一个表单f，您可以通过循环x次动态创建输入元素，其中x是所需的输入数量，所以类似

for ( var i=0;i<x;i++){
    var inputText = document.createElement("input"); //input element, text
    inputText.setAttribute('type',"text");
    inputText.setAttribute('name',"mark" + i);
    f.append(inputText);
}

Answer 2

这是一个片段，您可以运行并检查它。如果输入数量减少，它还会保留输入值。

＆＃13;

var inputNumber = document.getElementById('input-number');
inputNumber.addEventListener('change', changeNumberOfInputs);

function changeNumberOfInputs(event) {
  var desiredInputs = parseInt(event.target.value);
  var inputsForm = document.getElementById('inputs-form');
  var actualInputs = inputsForm.getElementsByTagName('input').length;
  if(actualInputs < desiredInputs) {
    for(var i=0; i<(desiredInputs - actualInputs); i++) {
      inputsForm.appendChild(document.createElement('input'));
    }
  }
  else if(actualInputs > desiredInputs) {
    for(var i=0; i<(actualInputs - desiredInputs); i++) {
      var lastInput = inputsForm.getElementsByTagName('input');
      lastInput = lastInput[lastInput.length - 1];
      inputsForm.removeChild(lastInput);
    }
  }
}

＆＃13;

<select id="input-number">
  <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 id="inputs-form">
  <input />
</form>

＆＃13;

Answer 3

您要做的是创建所有6个输入字段。然后将它们全部隐藏为标准，然后执行document.getElementById(id).style以获得样式。然后在选择更改时调用函数，并使用所选值来揭示隐藏的输入！

正如@Arthur Cantarela所说，这在JS中是一种不好的做法。或者，您可以将它们放入div中，并根据您需要的数量更改div的innerHTML！

Answer 4

您可以在angularjs中使用ng-repeat并将数字select绑定到重复表达式。

根据用户选择显示输入字段（选择）

4 个答案: