时间戳

首页 > 解决方案 > 如何添加值以从输入字段中选择标签？

javascript - 如何添加值以从输入字段中选择标签？

问题描述

如何添加值以从输入字段中选择标签？当我向名为 add_val 的输入字段输入文本并单击按钮时，它会将值添加到选择标记选项。

<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>
 <br>   
<input type="text" id="add_val" name="add_val">   
<button type="button" onclick="myFunction()">Insert option</button>

<script>
function myFunction() {
  var addvar = document.getElementById("add_val").value;  
  var x = document.getElementById("mySelect");
  var option = document.createElement("option");
  x.add(addvar);

}
</script>

但是最后还是不行啊，非常感谢

标签： javascript

解决方案

您需要使用appendChild Js 函数，并将值和innerHTML分配给您新创建的选项。

您也可以使用.text .textContent新选项。

运行下面的代码片段以查看它的工作原理。

function myFunction() {
  var addvar = document.getElementById("add_val").value;
  var select = document.getElementById("mySelect")
  var x = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.value = addvar;
  option.textContent = addvar;
  select.appendChild(option);
  //Clear Input
  document.getElementById("add_val").value = '';
}
<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>

<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>

推荐阅读