<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>联动</title>
</head>
<body>
省:
<select id="province"
οnchange="change();">
<option value="">请选择</option>
<option value="0">浙江省</option>
<option value="1">河北省</option>
<option value="2">江苏省</option>
</select>
市:
<select id="city">
<option>请选择</option>
</select>
<script>
//加载城市数据(模拟)
function load_city() {
return [
["杭州","宁波","温州"],
["保定","廊坊","唐山"],
["南京","无锡","苏州"]
];
}
//自动加载
var cities = load_city();
//重置城市
function change() {
//1.获取省份序号(value值)
var s1 =
document.getElementById("province");
var index = s1.value;
//2.获取该省份对应的城市
var pcities = cities[index];
//3.删除城市下拉选内原有的城市option
var s2 =
document.getElementById("city");
//var options = s2.children;
//注意：从后往前删
//for(var i=options.length-1;i;i--) {
// options[i].remove();
//}
s2.innerHTML =
"<option>请选择</option>";
//4.将获取到的城市添加到此下拉选内
if(pcities) {
for(var i=0;i<pcities.length;i++) {
var opt =
document.createElement("option");
opt.innerHTML = pcities[i];
s2.appendChild(opt);
}
}
}
</script>
</body>
</html>
08-17
786
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
