1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>省市联动</title>
6
7 </head>
8 <body>
9 <select name="" id="province" onchange="set()">
10 <option value="">选择省</option>
11 </select>
12 <select name="" id="city">
13 <option value="">选择市</option>
14 </select>
15
16 <script>
17 var arr = new Array();
18 arr['广东省'] = ['广州', '深圳', '珠海'];
19 arr['湖北省'] = ['武汉', '赤壁', '襄樊'];
20 window.onload = function () {
21 // 向省级赋值
22 var proSel = document.getElementById('province');
23 for (temp in arr) {
24 proSel.add(new Option(temp, temp));
25 }
26 }
27 var set = function () {
28 var citySel = document.getElementById('city');
29 citySel.options.length = 1;
30 //获取选中的省的信息
31 var pro = document.getElementById('province').value;
32 //如果选中的是提示信息，则不需要赋值
33 if (pro == '') return;
34 for (i = 0; i < arr[pro].length; i++) {
35 citySel.add(new Option(arr[pro][i], arr[pro][i]));
36 }
37
38
39 }
40 </script>
41 </body>
42
43 </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select name="" id="province" onchange="set()">
<option value="">选择省</option>
</select>
<select name="" id="city">
<option value="">选择市</option>
</select>
<script>
var arr = new Array();
arr['广东省'] = ['广州', '深圳', '珠海'];
arr['湖北省'] = ['武汉', '赤壁', '襄樊'];
window.onload = function () {
// 向省级赋值
var proSel = document.getElementById('province');
for (temp in arr) {
proSel.add(new Option(temp, temp));
}
}
var set = function () {
var citySel = document.getElementById('city');
citySel.options.length = 1;
//获取选中的省的信息
var pro = document.getElementById('province').value;
//如果选中的是提示信息，则不需要赋值
if (pro == '') return;
for (i = 0; i < arr[pro].length; i++) {
citySel.add(new Option(arr[pro][i], arr[pro][i]));
}
}
</script>
</body>
</html>