如何從輸入字段為 select 標簽添加值？

Question

如何從輸入字段為 select 標簽添加值？ 當我向名為 add_val 的輸入字段輸入文本並單擊按鈕時，它會將值添加到 select 標記選項。

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

但是最后還是不行啊，非常感謝

Answer 1

您需要使用appendChild Js function 並為您新創建的選項分配一個值和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>

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

Answer 3

可以用更少的線來完成；

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

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

Answer 5

這確實有一個 function 執行它onkeyup和onclick 。 我使用了appendChild function。

 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>