手把手教你做三级联动

最新推荐文章于 2023-04-01 10:04:31 发布

最骚的就是你

最新推荐文章于 2023-04-01 10:04:31 发布

阅读量6.6k

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/51888482

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

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

最骚的就是你

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
手把手教你做三级联动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省： <select style="width: 100px;" id="pre" onchange="chg(this);">
复制链接

扫一扫