js 多级联动(省、市、区)

时间:2023-12-28 10:03:56

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事件进行了封装。

效果展示:

js 多级联动(省、市、区)

说明:

  1.使用我封装好的方法,具有良好的迁移性,操作简单,只需要在页面上放一个带有ID的div即可;

  2.可创建指定级别联动;

  3.select标签及前面的文字都设置了class,可自定义设置CSS样式;

  4.其他实现方式已经写好。

相关推荐:

   类似文章