常用三级联动插件
我们在日常开发中，如果做表单，经常会遇到这样的需求：
根据你的首栏选项来动态加载第二栏的选项内容，再根据第二栏的选中项，动态加载第三栏内容，依次类推等等。这样的功能称之为三级联动，常用于城市选择，多门类产品选择，科室信息等。而对于许多没有接触过的人，都会觉得头大。
第一次碰到时，笔者也栽了坑，因此学习总结，记录为一篇博客。
一、简单的纯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
完整代码如下：
<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 += " + arr1[i].value + ""
}
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 = '';
for(var j = 0; j < arrA.length; j++) {
var aaa = arrA[j].split('@');
str1 += "] + ">" + aaa[1] + ""
}
otwo.innerHTML = str1;
otwo.disabled = false;
three.innerHTML = '';
three.disabled = 'disabled';
}
var arr3 = {
'101': ['朝阳区', '昌平区'],
'201': ['宝山区', '浦东区'],
'301': ['不知道'],
'401': ['真的不知道'],
'501': ['市中区', '历下区', '槐荫区'],
'502': ['市南区', '市北区', '崂山区']
};
otwo.onchange = function() {
var val = this.value;
console.log(this.value);
var str2 = '';
console.log(val)
for(var l = 0; l < arr3[val].length; l++) {
str2 += " + arr3[val][l] + ""
}
three.innerHTML = str2;
three.disabled = false;
}
script>
body>
html>二、jquery实现三级联动
jquery实现思路大致相同，只是代码采用jquery的语法。
<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("");
}
//多维数组做数据来源
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(" + changShang + "");
})
//一级变动
$("#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(" + pp + "");
});
$("#selB").change(function () {
Init($("#selC"));
$.each(pps, function (pp,xhs) {
if ($("#selB option:selected").text()==pp) {
$.each(xhs.split(','), function () {
$("#selC").append(" + this + "");
})
}
})
})
}
})
})
})
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数据的格式。根据格式的不同，对上述代码进行灵活调整，以获取到正确的对应数据。