常用三级联动插件

最新推荐文章于 2023-12-24 13:04:16 发布

Little_ChenH

最新推荐文章于 2023-12-24 13:04:16 发布

阅读量4.8k

点赞数 1

分类专栏： js插件

js插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们在日常开发中，如果做表单，经常会遇到这样的需求：

根据你的首栏选项来动态加载第二栏的选项内容，再根据第二栏的选中项，动态加载第三栏内容，依次类推等等。这样的功能称之为三级联动，常用于城市选择，多门类产品选择，科室信息等。而对于许多没有接触过的人，都会觉得头大。
第一次碰到时，笔者也栽了坑，因此学习总结，记录为一篇博客。

一、简单的纯js原理实现

以下的三级联动是纯前端实现的，准确来说是本地捏造了一些参考数据，然后用js处理实现selection的动态更新，完成三级联动功能。

相对比较简单，但是麻雀虽小，五脏俱全，简单更易于我们入门理解！

实现思路：

1 首先，我们了解一下这类三级联动的数据格式是什么样的。

//选项框1的数据：
var arr1 = [{
    "id": "1",
    "value": "北京"
}, {
    "id": "2",
    "value": "上海"
}, {
    "id": "3",
    "value": "重庆"
}, {
    "id": "4",
    "value": "天津"
}, {
    "id": "5",
    "value": "山东"
}];
//选项框2的数据：
var arr2 = {
    '1': ['101@北京'],
    '2': ['201@上海'],
    '3': ['301@重庆'],
    '4': ['401@天津'],
    '5': ['501@济南', '502@青岛']
};
//选项框3的数据：
var arr3 = {
    '101': ['朝阳区', '昌平区'],
    '201': ['宝山区', '浦东区'],
    '301': ['不知道'],
    '401': ['真的不知道'],
    '501': ['市中区', '历下区', '槐荫区'],
    '502': ['市南区', '市北区', '崂山区']
};

我们可以看见：

arr1为数组，数组项为对象，包含id和value键值对，。
arr2为对象，包含key-value的键值对，key为id，value值为数组，数组项为编号+地点字符串。
arr3为对象，包含key-value键值对，key为编号，value为具体区域地点。

从这种数据结构我们可以看出，实现三级联动的过程大致为：

step1：从选项框1中选中一个地点，我们获得它的value，进而知道了arr1中对应的id值。然后我们用这个id找到arr2中对应的项，得到value值。再通过对value处理，得到地区编号和对应地点。进而动态生成选项框2数据。
step2：从选项框2中选中一个地点，我们获得它的value值，对应找到其在arr2数组项中对应的编号。用这个编号去arr3中得到对应的地点数组，生成选项框3的数据。
step3：从选项框3选择精确的区域。
如果有第四，第五…选项框，过程类似。

2 接下来我们要做的就是通过js实现它！具体思路为：
- 获取表单元素
- 设定标志位（sign），控制是否开启选框（通过select的disabled属性）。此处有三个，一默认开启。
- 处理arr1数据，渲染i数据到选项框1中。
- 选项框1绑定onchange事件，一旦变化，就通过value值获得arr2中对应的参数项。通过for循环+字符串处理数据，渲染到选项框2中。开启选框2的disabled：false
- 选项框2绑定onchange事件，一旦变化，通过value值获得arr3中对应的参数项。通过for循环+字符串处理数据，渲染到选项框3中。开启选框3的disabled：false
完整代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <select id="one">
            <option>请输入省份</option>
        </select>
        <select id="two">
            <option>请输入市</option>
        </select>
        <select id="three">
            <option>请输入区</option>
        </select>
        <script type="text/javascript">
            var oone = document.getElementById("one");
            var otwo = document.getElementById("two");
            var three = document.getElementById("three");
            var str = '';
            otwo.disabled = true;
            three.disabled = true;
            var arr1 = [{
                "id": "1",
                "value": "北京"
            }, {
                "id": "2",
                "value": "上海"
            }, {
                "id": "3",
                "value": "重庆"
            }, {
                "id": "4",
                "value": "天津"
            }, {
                "id": "5",
                "value": "山东"
            }];
            for(var i = 0; i < arr1.length; i++) {
                str += "<option value=" + arr1[i].id + ">" + arr1[i].value + "</option>"
            }
            oone.innerHTML = str;
            var arr2 = {
                '1': ['101@北京'],
                '2': ['201@上海'],
                '3': ['301@重庆'],
                '4': ['401@天津'],
                '5': ['501@济南', '502@青岛']
            };
            oone.onchange = function() {
                var val = this.value;
                var arrA = arr2[val];
                var str1 = '<option>请输入市</option>';
                for(var j = 0; j < arrA.length; j++) {
                    var aaa = arrA[j].split('@');
                    str1 += "<option value=" + aaa[0] + ">" + aaa[1] + "</option>"
                }
                otwo.innerHTML = str1;
                otwo.disabled = false;
                three.innerHTML = '<option>请输入区</option>';
                three.disabled = 'disabled';
            }
            var arr3 = {
                '101': ['朝阳区', '昌平区'],
                '201': ['宝山区', '浦东区'],
                '301': ['不知道'],
                '401': ['真的不知道'],
                '501': ['市中区', '历下区', '槐荫区'],
                '502': ['市南区', '市北区', '崂山区']
            };
            otwo.onchange = function() {
                var val = this.value;
                console.log(this.value);
                var str2 = '<option>请输入区</option>';
                console.log(val)
                for(var l = 0; l < arr3[val].length; l++) {
                    str2 += "<option >" + arr3[val][l] + "</option>"
                }
                three.innerHTML = str2;
                three.disabled = false;
            }
        </script>
    </body>

</html>

二、jquery实现三级联动

jquery实现思路大致相同，只是代码采用jquery的语法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <style type="text/css">
        body {
            font-size:13px;text-align:center;
        }
        div {
            width:400px;border:1px solid #000000;
            background-color:#f5e8e8;margin:100px 300px;
            padding:10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            function Init(node) {
                return node.html("<option>---请选择---</option>");
            }
　　　　　　　//多维数组做数据来源
            var db = {
                腾讯: {
                    LOL: "德玛,EZ瑞尔,剑圣",
                    BNS: "气功师,力士,刺客,气宗师",
                    DNF:"A,B,C,D"
                },
                阿里巴巴: {
                    APPLAY: "AL,EZ瑞尔,剑圣",
                    HUABEI: "AL,力士,刺客,气宗师",
                    JIEBEI: "AL,B,C,D"
                },
                百度: {
                    ggs: "BD,EZ瑞尔,剑圣",
                    BD: "BD,力士,刺客,气宗师",
                    BDBD: "BD,B,C,D",
                }
            };
　　　　　　　　//初始化select节点
            $.each(db, function (changShang) {
                $("#selF").append("<option>" + changShang + "</option>");
            })
            //一级变动
            $("#selF").change(function () {
                //清空二三级
                Init($("#selB"));
                Init($("#selC"));
                $.each(db,function (cs,pps) {
                    if ($("#selF option:selected").text() == cs) {
                        $.each(pps, function (pp, xhs) {
                            $("#selB").append("<option>" + pp + "</option>");
                        });
                        $("#selB").change(function () {
                            Init($("#selC"));
                            $.each(pps, function (pp,xhs) {
                                if ($("#selB option:selected").text()==pp) {
                                    $.each(xhs.split(','), function () {
                                        $("#selC").append("<option>" + this + "</option>");
                                    })
                                }
                            })
                        })
                    }
                })
            })

        })
    </script>
</head>
<body>
    <div class="bg-primary">
        <hr />
        企业：<select id="selF">
               <option>---请选择---</option>    
        </select>
        产品：<select id="selB">
               <option>---请选择---</option>    
        </select>
        嗯嗯：<select id="selC">
               <option>---请选择---</option>    
        </select>
        <p id="pid"></p>
    </div>
</body>
</html>

这里只需要回顾一下jquery的$.each()方法即可。
$.each(object, [callback]):
object:需要遍历的对象或数组。
callback:每个成员/元素执行的回调函数，两个参数（key，value）。
如：

$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

后记

三级联动的逻辑其实并不复杂，在于通过你的选择传递一个编码，通过此编码就能找到对应的下一级选项。对于不同的业务需求，整体区别不待。需要注意的是，json数据的格式。根据格式的不同，对上述代码进行灵活调整，以获取到正确的对应数据。

Little_ChenH

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
常用三级联动插件

我们在日常开发中，如果做表单，经常会遇到这样的需求：根据你的首栏选项来动态加载第二栏的选项内容，再根据第二栏的选中项，动态加载第三栏内容，依次类推等等。这样的功能称之为三级联动，常用于城市选择，多门类产品选择，科室信息等。而对于许多没有接触过的人，都会觉得头大。第一次碰到时，笔者也栽了坑，因此学习总结，记录为一篇博客。一、简单的纯js原理实现以下的三级联动是纯前端实现的...
复制链接

扫一扫