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

【问题标题】：How to add value to select tag from input field?如何添加值以从输入字段中选择标签？
【发布时间】：2020-07-09 04:20:16
【问题描述】：

如何添加值以从输入字段中选择标签？当我向名为 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>

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

【问题讨论】：

标签： javascript

【解决方案1】：

您需要使用appendChild Js 函数并为您新创建的选项分配一个值和innerHTML。

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

在下面运行 sn-p 以查看它的工作情况。

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>

【讨论】：

成功了。一定要爱 appendChild。
使用.text、.innerText或.textContent设置内容。 DOM 元素不允许成为 option 元素的子元素，因此使用 HTML 解析器（如 .innerHTML）会产生误导。
@slappy 是的，我知道我已经在答案中添加了更多信息以反映这一点。感谢您的评论。

【解决方案2】：

你做错了，所以正确的代码是：

function myFunction() {
  var select = document.getElementById('mySelect');
  var option = document.createElement('option')
  // get the value from the input
  var text = document.getElementById('add_val').value;
  // create text node for option element
  option.appendChild(document.createTextNode(text));
  // set option value
  option.value = text;
  // add option to select
  select.appendChild(option);
}

<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>

【讨论】：

【解决方案3】：

可以用更少的行来完成；

function myFunction() {
  var x = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.text = document.getElementById("add_val").value;
  x.add(option);
}

【讨论】：

【解决方案4】：

将.insertAdjacentHTML() 与字符串插值一起使用，使其简短易懂。

function myFunction() {
  var addvar = document.getElementById("add_val").value;
  document.getElementById("mySelect")
    .insertAdjacentHTML("beforeend", `<option>${addvar}</option>`);

}

<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>

但如果你想直接创建 DOM 元素，我会这样做：

function myFunction() {
  document.getElementById("mySelect")
    .appendChild(document.createElement("option"))
    .text = 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>
<br>
<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>

【讨论】：

【解决方案5】：

这确实有一个功能可以做到onkeyup和onclick。我使用了appendChild 函数。

function myFunction1() {

  var val = $("#add_val1").val();
  var select = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.value = val;
  option.textContent = val;
  select.appendChild(option);

}

function myFunction2() {

  var val = $("#add_val1").val();
  var select = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.value = val;
  option.textContent = val;
  select.appendChild(option);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>
 <br>
 
<h5>To Add Value Onkeyup</h5>
<input type="text" id="add_val1" name="add_val1" onkeyup="myFunction1()">

<h5>To Add Value When Button Is Clicked</h5>
<input type="text" id="add_val2" name="add_val2">
<button onclick="myFunction2()">Insert Option</button>

【讨论】：