本文来讲一个中国省,市,区,镇/县四级下拉框联动
不同数据源操作方式不同,本文使用的递归方式,支持无限层级联动(只要数据支持)
上代码吧,没什么难度,主要是数据源的来源
<div id="chinaCityContainer"></div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(function () {
$('#btnTestChinaCityData').click(function () {
testHdeviceIndexService.testChinaCityData();
return false;
});
});
var testHdeviceIndexService = {
testChinaCityData: function () {
//全国城市数据(缺少台湾,香港,澳门数据)
var url = 'https://code.bdstatic.com/npm/zoningjs@2.0.19/zoning-4.json';
$.ajax({
url: url,
type: 'get',
success: function (a, b, c, d, e) {
testHdeviceIndexService.chinaCityData = a;
//初始化省数据
testHdeviceIndexService.init('0', -1);
},
error: function (a, b, c, d, e) {
debugger;
var test = null;
}
});
},
chinaCityData: null,
//层级名称,递归时自动使用
arrName: ['省', '市', '区', '镇'],
init: function (id, domIndex) {
//获取到对应的数据
var dataList = testHdeviceIndexService.chinaCityData[id];
if (dataList) {
//控件索引需要+1,因为要获取到下一个控件的id
domIndex++;
//需要联动的下拉框dom对象
var needUpdateDom = $('#select' + domIndex);
//如果不存在,则需要初始化dom对象
if (needUpdateDom.length < 1) {
//获取到要显示的层级名称
var name = domIndex < testHdeviceIndexService.arrName.length
? testHdeviceIndexService.arrName[domIndex]
: domIndex;
//渲染下拉框控件
var selectHtml = name + ':<select id="select' + domIndex + '"></select>';
$('#chinaCityContainer').append(selectHtml);
//联动事件
$('#select' + domIndex).change(function () {
var domId = this.id;
//当前控件索引
var index = domId.substr(6);
//下拉框选择的值
var selectedValue = $(this).val();
//递归联动
testHdeviceIndexService.init(selectedValue, index);
});
}
//控件初始化完毕后(如果存在则不需要初始化)
var selectDataHtml = testHdeviceIndexService.getSelectHtmlByDataList(dataList);
//根据数据集合渲染联动下拉框的值
$('#select' + domIndex).html(selectDataHtml);
} else {
//没有数据
var msg = '未找到id = ' + id + '的数据';
console.log(msg);
}
},
getSelectHtmlByDataList: function (list) {
根据数据集合获取到下拉框选项html
if (list && list.length > 0) {
var htmlList = ['<option value="">请选择</option>'];
list.forEach(item => {
htmlList.push('<option value="' + item.id + '">' + item.text + '</option>');
});
return htmlList.join('');
}
return '';
}
Ending~