自己动手丰衣足食之三级联动

简介:
<!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="pres[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;
                     }
                     //获取值
                    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>
AI 代码解读
目录
打赏
0
0
0
0
33
分享
相关文章
程序员也可以很浪漫!这样的一款表白代码收藏馆项目,即使小白也可以使用,发给你的对象试试!
程序员也可以很浪漫!这样的一款表白代码收藏馆项目,即使小白也可以使用,发给你的对象试试!
179 0
Unity精华☀️点乘、叉乘终极教程:用《小小梦魇》讲解这个面试题~
Unity精华☀️点乘、叉乘终极教程:用《小小梦魇》讲解这个面试题~
这个知识点99%的前端都没有听过,不信你进来看?
这个知识点99%的前端都没有听过,不信你进来看?
114 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百零一题-全选
#yyds干货盘点# 前端歌谣的刷题之路-第一百零一题-全选
125 0
#yyds干货盘点# 前端歌谣的刷题之路-第一百零一题-全选
#yyds干货盘点# 歌谣学前端之类笔记1
#yyds干货盘点# 歌谣学前端之类笔记1
101 0
写给小白看的硬核递归(低调点,当回小白)
递归:就是函数自己调用自己。 子问题须与原始问题为同样的事,或者更为简单。 递归通常可以简单的处理子问题,但是不一定是最好的解决方式。
110 0
#yyds干货盘点# 前端歌谣的刷题之路-第十八题-清除浮动
#yyds干货盘点# 前端歌谣的刷题之路-第十八题-清除浮动
108 0
#yyds干货盘点# 前端歌谣的刷题之路-第十八题-清除浮动
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等