本文來講一箇中國省,市,區,鎮/縣四級下拉框聯動
不同數據源操作方式不同,本文使用的遞歸方式,支持無限層級聯動(只要數據支持)
上代碼吧,沒什麼難度,主要是數據源的來源
<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/[email protected]/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~