如何获取下拉选择中的数字值并根据所选值创建元素输入文本框？

Question

JS 初学者/学习者的简单问题。

如何获取下拉选择中的数字值并根据所选值创建元素输入文本框？

我有一个带有数字值的选择选项，我想在选项中选择数字时创建多个文本框。

例如：在下拉列表中我选择8，因此需要输出8个文本框。

我的代码如下：

<select class="form-control" id="textboxes">

            <option>8</option>

            <option>9</option>

            <option>10</option>

            <option>11</option>

            <option>12</option>

          </select>

  var textboxNumbers = document.getElementById("textboxes").value;

  var i;

  for(i=0; i<textboxNumbers; i++){

    var yourTextboxes = document.createElement("INPUT");

    yourTextboxes.setAttribute("type", "text");

    document.getElementById("balls").appendChild(yourTextboxes);

  }

Answer 1

添加value选项并添加onchange选择function changeValue(){&nbsp; var textboxNumbers = document.getElementById("textboxes").value;&nbsp; balls.innerHTML = '';&nbsp; var i;&nbsp; for(i=0; i<textboxNumbers; i++){&nbsp; &nbsp; var yourTextboxes = document.createElement("INPUT");&nbsp; &nbsp; yourTextboxes.setAttribute("type", "text");&nbsp; &nbsp; document.getElementById("balls").appendChild(yourTextboxes);&nbsp; }}<select class="form-control" id="textboxes" onchange="changeValue()">&nbsp; <option value="8">8</option>&nbsp; <option value="9">9</option>&nbsp; <option value="10">10</option>&nbsp; <option value="11">11</option>&nbsp; <option value="12">12</option></select><div id="balls"></div>

Answer 2

你快到了。创建并调用下拉菜单更改时的函数。const balls = document.getElementById("balls")function createTxtBox() {&nbsp; var textboxNumbers = document.getElementById("textboxes").value;&nbsp; var i;&nbsp; balls.innerHTML = ''; // remove previously created text box&nbsp; for (i = 0; i < textboxNumbers; i++) {&nbsp; &nbsp; var yourTextboxes = document.createElement("INPUT");&nbsp; &nbsp; yourTextboxes.setAttribute("type", "text");&nbsp; &nbsp; balls.appendChild(yourTextboxes);&nbsp; }}<select class="form-control" id="textboxes" onchange='createTxtBox()'>&nbsp; <option value="8">8</option>&nbsp; <option value="9">9</option>&nbsp; <option value="10">10</option>&nbsp; <option value="11">11</option>&nbsp; <option value="12">12</option></select><div id='balls'></div>

Answer 3

在您的选择标签中，您需要一个更改事件。更改事件使用参数this（this包含选择元素）调用 addElements 函数。在您的函数中，您可以使用 获取所选值selectElement.value。在添加元素之前balls.innerHTML = ""将清空您的球元素。function addElements(selectElement) {&nbsp; var textboxNumbers = selectElement.value;&nbsp; var balls = document.getElementById("balls");&nbsp; balls.innerHTML = ""; //Empty "balls" element&nbsp; for (var i = 0; i < textboxNumbers; i++) {&nbsp; &nbsp; var yourTextboxes = document.createElement("INPUT");&nbsp; &nbsp; yourTextboxes.setAttribute("type", "text");&nbsp; &nbsp; balls.appendChild(yourTextboxes);&nbsp; }}<select class="form-control" onchange="addElements(this)" id="textboxes">&nbsp; <option>Please Select</option>&nbsp; <option>8</option>&nbsp; <option>9</option>&nbsp; <option>10</option>&nbsp; <option>11</option>&nbsp; <option>12</option></select><div id="balls"></div>