您的位置：首页 > Web前端 > JavaScript

JavaScript实现二级联动

2017-07-28 17:23 316 查看 
<html>
<head>
<title>二级联动</title>
</head>

<body>
<select id="a1" onchange="addOption()"></select>
<select id="a2"></select>
<script>
var city = new Array;
city['江苏'] = ['请选择城市','南京', '连云港', '苏州', '镇江'];
city['山东'] = ['请选择城市','青岛', '烟台', '济南'];

function allCity() {
var select1 = document.getElementById("a1");
for(var i in city) {  //这里注意遍历数组的写法
select1.add(new Option(i, i), null);
}
addOption(); // 初始化选项
}

function addOption() {
var select2 = document.getElementById("a2");
var select1 = document.getElementById("a1").value;
select2.length = 0; //每次都先清空一下市级菜单
if(select1 != '请选择省份') {
for(var i in city[select1 ]) {
select2.add(new Option(city[select1][i], city[select1][i]), null);
}
}else if (sheng == '请选择省份'){
select2.length = 0;
select2.add(new Option("请选择城市", "请选择城市"), null);
}
}
window.onload = allCity();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航