javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下：
1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。
此时的显示效果如下，其中option中有三项。
2、JS的函数设计如下：
现有的options如下：
3、在页面上输入新的数据，点击添加。
此时的select效果显示如下，自由添加功能实现。
HTML:
<!DOCTYPE html><html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<ul>
<li class="dropdown">
<a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a>
<div class="dropdown-content" id="dropdown-a">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
<li class="dropdown">
<a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a>
<div class="dropdown-content" id="dropdown-b">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
body {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
ul {
list-style-type: none
margin: 0
padding: 0
overflow: hidden
background-color: #333
}
li {
float: left
}
li a, .dropbtn {
display: inline-block
color: white
text-align: center
padding: 14px 16px
text-decoration: none
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #1f75cf
}
li.dropdown {
display: inline-block
}
.dropdown-content {
display: none
position: absolute
background-color: #fafafa
min-width: 160px
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}
.dropdown-content a {
color: black
padding: 12px 16px
text-decoration: none
display: block
text-align: left
}
.dropdown-content a:hover {
color: white
background-color: #1f75cf
}
.show {
display: block
}
JavaScript (script.js):
function showList(o) {hideList("dropdown-content" + o.id)
document.getElementById("dropdown-" + o.id).classList.toggle("show")
}
function hideList(option) {
var dropdowns = document.getElementsByClassName("dropdown-content")
for (var i = 0 i < dropdowns.length i++) {
var openDropdown = dropdowns[i]
if (openDropdown.id != option) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show')
}
}
}
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideList("")
}
}
点击标题 A：
点击标题 B：
JSFiddle 调试：jsfiddle.net/soL73u4y/2/
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）