Question

实际上，我有这个选择字段来选择最初包含数据“ 1”的选项。但是，如果单击“添加”按钮，则应将“ 2”动态添加到选择字段中。我已经尝试过，但是在第一阶段添加了2，但后来却没有增加到3、4、5。我只得到了2、2、2、2。

<html>
<body>

<form>
  <select id="mySelect" size="1">
    <option id="option1">1</option>


  </select>
</form>
<br>


<button type="button" onclick="myFunction()">Add</button>

<script>

function myFunction() {

     var y = document.getElementById("option1").value;

    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = ++y;
    x.add(option);
}
</script>

</body>
</html>

Answer 1

首先，使用Failed to load http://www.trusting.com/hey/signup: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.将var y = document.getElementById("option1").value;始终重置为y，因此它始终变为1。如果在函数外部声明/初始化2，它将按原样工作。

一个更简单的解决方案是使用var y的{{1}}属性获取option元素的数量，然后向其中添加select。

堆栈片段

length

此处是现有解决方案的更新版本，例如在函数外部声明1。

<html>
<body>

<form>
  <select id="mySelect" size="1">
    <option id="option1">1</option>


  </select>
</form>
<br>


<button type="button" onclick="myFunction()">Add</button>

<script>

function myFunction() {

    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = x.length + 1;
    x.add(option);
}
</script>

</body>
</html>

Answer 2

您可以尝试

<html>
<body>

<form>
  <select id="mySelect" size="1">
    <option id="option1">1</option>


  </select>
</form>
<br>


<button type="button" onclick="myFunction()">Add</button>

<script>
var count = document.getElementById("mySelect").options[0].value;
function myFunction() {
    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = ++count ;
    x.appendChild(option);
}
</script>

</body>
</html>

jsfiddle：http://jsfiddle.net/au0qdtj1/22/

如何在JavaScript中进行动态选择字段？

2 个答案: