JavaScript制作简单的三级联动菜单实例代码

最新推荐文章于 2022-01-09 10:34:53 发布

源码学习分享

最新推荐文章于 2022-01-09 10:34:53 发布

阅读量1.5k

点赞数

分类专栏： js

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文给大家分享的是使用javascript实现的一个简单的三级联动菜单，非常简单实用，有需要的小伙伴过来参考下吧。

用javascript制作的一个简单三级联动，非常简单实用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        省：

        <select style="width: 100px;" id="pre" οnchange="chg(this);">

            <option value="-1">请选择</option>

        </select>

        市：

        <select style="width: 100px;" id="city" οnchange="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>

原文地址：http://www.xz-src.com/5136.html

源码学习分享

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript制作简单的三级联动菜单实例代码

本文给大家分享的是使用javascript实现的一个简单的三级联动菜单，非常简单实用，有需要的小伙伴过来参考下吧。用javascript制作的一个简单三级联动，非常简单实用省：请选择市：
复制链接

扫一扫