省市联动

 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>

View Code

<!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>