快捷導(dǎo)航

JS制作簡單的三級聯(lián)動

更新時間：2015年03月18日 15:03:45 投稿：hebedich

本文給大家分享的是使用javascript實現(xiàn)的一個簡單的三級聯(lián)動菜單，非常簡單實用，有需要的小伙伴過來參考下吧。

用javascript制作的一個簡單三級聯(lián)動，非常簡單實用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        ?。?br />
        <select style="width: 100px;" id="pre" onchange="chg(this);">

            <option value="-1">請選擇</option>

        </select>

        市：

        <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>

        區(qū)：

        <select style="width: 100px;" id="area"></select>

    </body>

    <script>

         //聲明省

        var pres = ["北京", "上海", "山東"]; //直接聲明Array

         //聲明市

        var cities = [

            ["東城", "昌平", "海淀"],

            ["浦東", "高區(qū)"],

            ["濟(jì)南", "青島"]

        ];

        var areas = [

                [

                    ["東城1", "東城2", "東城3"],

                    ["昌平1", "昌平2", "昌平3"],

                    ["海淀1", "海淀2", "海淀3"]

                ],

                [

                    ["浦東1", "浦東2", "浦東3"],

                    ["高區(qū)1", "高區(qū)2", "高區(qū)3"]

                ],

                [

                    ["濟(jì)南1", "濟(jì)南2"],

                    ["青島1", "青島2"]

                ]

            ]

            //設(shè)置一個省的公共下標(biāo)

        var pIndex = -1;

        var preEle = document.getElementById("pre");

        var cityEle = document.getElementById("city");

        var areaEle = document.getElementById("area");

         //先設(shè)置省的值

        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];

            //獲取默認(rèn)區(qū)

            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>