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

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(){

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

  balls.innerHTML = '';

  var i;

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

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

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

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

  }

}

<select class="form-control" id="textboxes" onchange="changeValue()">

  <option value="8">8</option>

  <option value="9">9</option>

  <option value="10">10</option>

  <option value="11">11</option>

  <option value="12">12</option>

</select>

<div id="balls"></div>

Answer 2

你快到了。创建并调用下拉菜单更改时的函数。

const balls = document.getElementById("balls")

function createTxtBox() {

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

  var i;

  balls.innerHTML = ''; // remove previously created text box

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

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

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

    balls.appendChild(yourTextboxes);

  }

}

<select class="form-control" id="textboxes" onchange='createTxtBox()'>

  <option value="8">8</option>

  <option value="9">9</option>

  <option value="10">10</option>

  <option value="11">11</option>

  <option value="12">12</option>

</select>

<div id='balls'></div>

Answer 3

在您的选择标签中，您需要一个更改事件。更改事件使用参数this（this包含选择元素）调用 addElements 函数。在您的函数中，您可以使用 获取所选值selectElement.value。在添加元素之前balls.innerHTML = ""将清空您的球元素。

function addElements(selectElement) {

  var textboxNumbers = selectElement.value;

  var balls = document.getElementById("balls");

  balls.innerHTML = ""; //Empty "balls" element

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

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

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

    balls.appendChild(yourTextboxes);

  }

}

<select class="form-control" onchange="addElements(this)" id="textboxes">

  <option>Please Select</option>

  <option>8</option>

  <option>9</option>

  <option>10</option>

  <option>11</option>

  <option>12</option>

</select>

<div id="balls"></div>