<html>
<head>
<meta charset="utf-8"/>
<title>联动</title>
<script>
var cities=[
["杭州","宁波","温州"],
["南京","无锡","苏州"],
["济南","青岛","烟台"]
]
//select.value用来获取下拉选的值
//1.若value没有属性,则它会返回option的内容
//2.若有value属性,则会返回option的value值
function set_city(){
//获取省
var sel1=document.getElementById("province")
console.log(sel1.value)
var pindex=sel1.value
var pcities=cities[pindex-1]
//删除原有的市
var sel2=document.getElementById("city")
sel2.innerHTML="<option>请选择</option>"
//var options=sel2.children
//for(var i=options.length-1i>0i--){
// options[i].remove()
//}
//添加新的城市
for(var i=0i<pcities.lengthi++){
var name=pcities[i]
var option =document.createElement("option")
option.innerHTML=name
sel2.appendChild(option)
}
}
</script>
</head>
<body>
<!-- onchange是值改变事件,只有当值发生
改变后,才会改变 -->
省:
<select onchange="set_city()" id="province">
<option value="0">请选择</option>
<option value="1">浙江省</option>
<option value="2">江苏省</option>
<option value="3">山东省</option>
</select>
市:
<select id="city">
<option>请选择</option>
</select>
</body>
</html>
（1）var provs={}，存储省市的json结构数据。
（2）function loadProv() {}，此函数实现了初始化页面加载数据的功能。
（3）var prov = document.getElementById("prov")，获取存放省份的select下拉菜单。
（4）for (var key in provs)，遍历json结构数据。
（5）var provName = key，获取省份的名称。
（6）var optProv = document.createElement("option")，创建一个option元素对象。
（7）optProv.value = provName，设置option元素的value属性值。
（8）optProv.innerText = provName，设置option显示的文本内容。
（9）prov.appendChild(optProv)，将option元素添加到select下拉菜单。
（10）function provChange() {}，作为onchange事件处理函数。
（11）var prov = document.getElementById("prov"),获取省份下拉菜单。
（12）var city = document.getElementById("city"),获取城市下拉菜单。
（13）var provName = prov.value，获取当前选中的省份的value值。
（14）if (provName == "none") {
city.style.display = "none"
return
}，如果值等于none，说明选中的是第一项，那么城市下拉菜单还是具有隐藏状态，并跳出函数。
（15）else {
city.style.display = ""
},否则的话显示出城市下拉菜单，默认状态它是隐藏的。
（16）var citys = provs[provName]，获取城市，citys是个数组。
（17）for (var index = city.childNodes.length - 1index >= 0index--) {
var child = city.childNodes[index]
city.removeChild(child)
}，遍历城市下拉菜单下的option元素，然后删除这些元素。
之所以清空就是为了防止当再次加载的时候出现累加情况。
（18）for (var index = 0index <citys.lengthindex++) {}，遍历数组中的元素，也就是城市。
（19）var optCity = document.createElement("option")，创建option元素。
（20）optCity.value = citys[index]，设置option元素的value值。
（21）optCity.innerText = citys[index]，设置option元素的文本内容。
（22）city.appendChild(optCity)，将option元素添加select下拉菜单。
数据表形式数据
json形式数据
html下拉框怎么用js添加新值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效果显示如下，自由添加功能实现。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）