手把手教你做三级联动

最新推荐文章于 2021-03-19 14:24:45 发布

绿萝哥哥

最新推荐文章于 2021-03-19 14:24:45 发布

阅读量297

点赞数 1

本文链接：https://blog.csdn.net/uffgfbft/article/details/83759778

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>    </head>    <body>        省：        <select style="width: 100px;" id="pre" onchange="chg(this);">            <option value="-1">请选择</option>        </select>        市：        <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>        区：        <select style="width: 100px;" id="area"></select>    </body>    <script>        //声明省        var pres = ["北京", "上海", "山东"]; //直接声明Array        //声明市        var cities = [            ["东城", "昌平", "海淀"],            ["浦东", "高区"],            ["济南", "青岛"]        ];        var areas = [                [                    ["东城1", "东城2", "东城3"],                    ["昌平1", "昌平2", "昌平3"],                    ["海淀1", "海淀2", "海淀3"]                ],                [                    ["浦东1", "浦东2", "浦东3"],                    ["高区1", "高区2", "高区3"]                ],                [                    ["济南1", "济南2"],                    ["青岛1", "青岛2"]                ]            ]            //设置一个省的公共下标        var pIndex = -1;        var preEle = document.getElementById("pre");        var cityEle = document.getElementById("city");        var areaEle = document.getElementById("area");        //先设置省的值        for(var i = 0; i < pres.length; i++) {            //声明option.<option value="i">pres[i]</option>            var op = new Option(pres[i], i);            //添加            preEle.options.add(op);        }        function chg(obj) {            if(obj.value == -1) {                cityEle.options.length = 0;                areaEle.options.length = 0;                return;            }            //获取值            var val = obj.value;            pIndex = obj.value;            //获取ctiry            var cs = cities[val];            //获取默认区            var as = areas[val][0];            //先清空市            cityEle.options.length = 0;            areaEle.options.length = 0;            for(var i = 0; i < cs.length; i++) {                var op = new Option(cs[i], i);                cityEle.options.add(op);            }            for(var i = 0; i < as.length; i++) {                var op = new Option(as[i], i);                areaEle.options.add(op);            }        }        function chg2(obj) {            var val = obj.selectedIndex;            var as = areas[pIndex][val];            areaEle.options.length = 0;            for(var i = 0; i < as.length; i++) {                var op = new Option(as[i], i);                areaEle.options.add(op);            }        }    </script></html>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94