DOM：通过文本框向下拉列表中添加内容
Posted 参谋长
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM：通过文本框向下拉列表中添加内容相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
}
</style>
</head>
<body>
<select id="s1" multiple="multiple" size="7"></select>
<input type="text" id="txt" />
<input type="button" id="btn" value="添加" />
<input type="button" id="btn_del" value="删除" />
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var btn_del = document.getElementById("btn_del");
btn.onclick = function() {
if(txt.value.trim() != "") {
var temp_opt = document.createElement(‘option‘);
temp_opt.innerText = txt.value;
s1.appendChild(temp_opt);
txt.value = "";
}
}
btn_del.onclick = function(){
var x = s1.selectedOptions[0];
s1.removeChild(x);
}
</script>
以上是关于DOM：通过文本框向下拉列表中添加内容的主要内容，如果未能解决你的问题，请参考以下文章
Axure之幼儿养成记---文本框、多行文本框、下拉列表框、列表框
如何向下拉列表中的名称添加点击事件，以显示在警报中点击的学生的成绩。一直很痛苦，请谢谢