js 多级联动（省、市、区）
CreateTime--2018年4月9日17:10:38
Author:Marydon
方式一：
数据从数据库获取，ajax实现局部刷新
方式二：
数据从json文件获取，ajax实现局部刷新
以方式二为例，进行演示（省市区三级联动）
前提：需要有省、市、区三个的数据封装文件
代码实现
1.自封装函数
/**
* 多级联动
*/
function MultipleCascades() { var containerId = "";
var num = "";
var textArray = ""; // 参数初始化
this.init = function(initParams) {
if (!initParams) return; containerId = initParams['containerId'];
num = initParams['selectNum'];
textArray = initParams['textDescraption']; for (var i = ; i <= num; i++) {
var selectId = "linkage" + i;
this.selectFactory(selectId,textArray[i-]);
}
}; // 创建select标签
this.selectFactory = function(id,text) {
// 创建文本提示
var spanElement = document.createElement('span');
spanElement.className = "textBox";
spanElement.innerHTML = text;
$('#' + containerId).append(spanElement); // 创建select标签
var selectElement = document.createElement('select');
selectElement.id = id;
selectElement.className = "selectStyle";
// 给select标签填充空的option标签
var optionElement = document.createElement('option');
optionElement.value = "";
optionElement.innerHTML = "--请选择--";
selectElement.appendChild(optionElement); $('#' + containerId).append(selectElement);
}; // select标签绑定onchange事件
this.bindChangeEvent = function(selectId,setData) { $('#' + selectId).change(function () {
var j = parseInt(selectId.substring()) + ;
// 将本select标签和它后面的联动标签移除掉
for (;j <= num; j++) {
$('#linkage' + j + ' option:gt(0)').remove();
} var selectValue = $('#' + selectId).val();
if (!selectValue) return;
setData();
}); }
};
HTML片段
<div id="selectContainer"></div>
2.调用
方法一：
$(function(){
var mc = new MultipleCascades();
mc.init({
'containerId':'selectContainer',
'selectNum':3,
'textDescraption':['省：','市：','区：']
});
// 2.获取省份信息
$.getJSON("json/province.json",function(provinces){
var optionTags = "";
$(provinces).each(function(index,obj){
optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
});
$('#linkage1').append(optionTags);
});
mc.bindChangeEvent('linkage1',function(){
var provinceId = $('#linkage1').val();
// 获取城市信息
$.getJSON("json/city.json",function(cities){
var optionTags = "";
$(cities[provinceId]).each(function(index,obj){
optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
});
$('#linkage2').append(optionTags);
});
});
mc.bindChangeEvent('linkage2',function(){
var cityId = $('#linkage2').val();
// 获取区（县）信息
$.getJSON("json/area.json",function(areas){
var optionTags = "";
areas[cityId].forEach(function(obj){
optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
});
$('#linkage3').append(optionTags);
});
});
});
方法二：
$(function(){
var mc = new MultipleCascades();
mc.init({
'containerId':'selectContainer',
'selectNum':3,
'textDescraption':['省：','市：','区：']
});
// 2.获取省份信息
$.getJSON("json/province.json",function(provinces){
var optionTags = "";
$(provinces).each(function(index,obj){
optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
});
$('#linkage1').append(optionTags);
});
// 绑定onchange事件
$('#linkage1').change(function(){
// 1.移除市和区的下拉选项
$('#linkage2 option:gt(0)').remove();
$('#linkage3 option:gt(0)').remove();
var provinceId = $(this).val();
if (!provinceId) return;
// 2.获取城市信息
$.getJSON("json/city.json",function(cities){
var optionTags = "";
$(cities[provinceId]).each(function(index,obj){
optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
});
$('#linkage2').append(optionTags);
});
});
$('#linkage2').change(function(){
$('#linkage3 option:gt(0)').remove();
var cityId = $(this).val();
if (!cityId) return;
// 获取区（县）信息
$.getJSON("json/area.json",function(areas){
var optionTags = "";
areas[cityId].forEach(function(obj){
optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
});
$('#linkage3').append(optionTags);
});
});
});
区别：在于方法一又对onchange事件进行了封装。
效果展示：
说明：
1.使用我封装好的方法，具有良好的迁移性，操作简单，只需要在页面上放一个带有ID的div即可；
2.可创建指定级别联动；
3.select标签及前面的文字都设置了class，可自定义设置CSS样式；
4.其他实现方式已经写好。