select層級(jí)聯(lián)動(dòng)選擇組件，通過select的附加屬性實(shí)現(xiàn)的下拉選擇,異步加載數(shù)據(jù)，支持有父子關(guān)系的多層聯(lián)動(dòng)。 注意select上增加的屬性字段：url標(biāo)識(shí)當(dāng)前數(shù)據(jù)源，child表示子級(jí)元素，childDataPath表示子級(jí)數(shù)據(jù)源， 有問題，聯(lián)系QQ：340114173
/***頁面元素，注意select上增加的屬性字段，url標(biāo)識(shí)當(dāng)前數(shù)據(jù)源，child表示子級(jí)元素，childDataPath表示子級(jí)數(shù)據(jù)源
* 無限極聯(lián)動(dòng)選擇組件封裝模塊
*/
layui.define(['jquery', 'form'], function (exports) {
var $ = layui.$, form = layui.form;
// 監(jiān)聽選中事件
form.on('select', function (data) {
var id = data.value;
var obj = data.elem.name;
var _this = $("select[name='" + obj + "']");
var child = _this.attr("child");
var childUrl = $("select[name='" + obj + "']").attr("childDataPath");
if ($("select[name='" + child + "']").length > 0) {
CascadeSelect.GetListByParent(child, id, childUrl, true);
}
});
var CascadeSelect = {
init: function (initObj, isReset) {
var url = $("select[name='" + initObj + "']").attr("url");
// ajax請(qǐng)求
$.get(url, function (data) {
$.each(data, function (i, d) {
$("select[name='" + initObj + "']").append(
"<option value='" + d.value + "'>" + d.key + "</option>");
});
form.render();
var selectValue = $("select[name='" + initObj + "']").attr("selectValue");
var child = $("select[name='" + initObj + "']").attr("child");
$("select[name='" + initObj + "']").val(selectValue);
var childUrl = $("select[name='" + initObj + "']").attr("childDataPath");
if (childUrl) {
CascadeSelect.GetListByParent(child, selectValue, childUrl, isReset);
}
}, 'json');
},
GetListByParent: function (obj, id, childUrl, isReset) {
// 先清空下拉框
var _this = $("select[name='" + obj + "']");
_this.empty();
_this.append("<option value=''>" + _this.attr("promtion") + "</option>");
var child = _this.attr("child");
var _thischild = $("select[name='" + child + "']");
var selectValue = "";
if (id !== "") {
$.ajax({
type: "POST",
url: childUrl,
dataType: "json",
data: { id: id },
async: false,
success: function (data) {
if (data.length > 0) {
$.each(data, function (i, d) {
_this.append("<option value='" + d.value + "'>" + d.key + "</option>");
});
if (!isReset) {
selectValue = _this.attr("selectValue");
_this.val(selectValue);
}
if (_thischild.length > 0) {
childUrl = _this.attr("childDataPath");
CascadeSelect.GetListByParent(child, selectValue, childUrl, isReset);
}
}
form.render();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg('系統(tǒng)異常導(dǎo)致操作失敗, 請(qǐng)聯(lián)系管理員。', { icon: 5, shift: 6 });
},
statusCode: {
404: function () {
layer.msg('未找到指定請(qǐng)求，請(qǐng)檢查訪問路徑！', { icon: 5, shift: 6 });
},
500: function () {
layer.msg('系統(tǒng)錯(cuò)誤，請(qǐng)聯(lián)系管理員。', { icon: 5, shift: 6 });
}
},
complete: function (XMLHttpRequest, textStatus) {
}
});
} else {
while (_thischild.length > 0) {
_thischild.empty();
_thischild.append("<option value=''>" + _thischild.attr("promtion") + "</option>");
_thischild = $("select[name='" + _thischild.attr("child") + "']");
}
form.render();
}
}
};
exports('cascadeSelect', CascadeSelect);
});
<div class="layui-form-item">使用方式：
<label class="layui-form-label text-r">行政區(qū)域：</label>
<div class="layui-inline">
<select class="select" name="ProvinceId" url="/Admin/Area/GetListByParent?id=86" child="CityId" childDataPath="/Admin/Area/GetListByParent" selectValue="310000" promtion="請(qǐng)選擇省">
<option value="">請(qǐng)選擇省</option>
</select>
</div>
<div class="layui-inline">
<select class="select" name="CityId" child="DistrictId" childDataPath="/Admin/Area/GetListByParent" selectValue="310100" promtion="請(qǐng)選擇市">
<option value="">請(qǐng)選擇市</option>
</select>
</div>
<div class="layui-inline">
<select class="select" name="DistrictId" child="StreetId" childDataPath="/Admin/Area/GetListByParent" selectValue="310118" promtion="請(qǐng)選擇縣/區(qū)">
<option value="">請(qǐng)選擇縣/區(qū)</option>
</select>
</div>
<div class="layui-inline">
<select class="select" name="StreetId" selectValue="" promtion="請(qǐng)選擇鄉(xiāng)鎮(zhèn)/街道">
<option value="">請(qǐng)選擇鄉(xiāng)鎮(zhèn)/街道</option>
</select>
</div>
</div>
layui.config({
base: '/layuiadmin/' //靜態(tài)資源所在路徑
}).extend({
index: 'lib/index' //主入口模塊
, cascadeSelect: '{/}/layuiadmin/layui/layui_exts/cascadeSelect/cascadeSelect' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑
}).use(['index', 'form', 'laydate','cascadeSelect'], function () {
var $ = layui.$
, admin = layui.admin
, element = layui.element
, layer = layui.layer
, laydate = layui.laydate
, cascadeSelect = layui.cascadeSelect
, form = layui.form;
form.render(null, 'component-form-group');
cascadeSelect.init('ProvinceId', false);
} AJAX數(shù)據(jù)返回格式，需要自己實(shí)現(xiàn)，按照父子關(guān)系的查詢邏輯，省級(jí)數(shù)據(jù)返回參考
[{
"key": "北京",
"value": "110000"
}, {
"key": "天津",
"value": "120000"
}, {
"key": "河北省",
"value": "130000"
}, {
"key": "山西省",
"value": "140000"
}, {
"key": "內(nèi)蒙古自治區(qū)",
"value": "150000"
}, {
"key": "遼寧省",
"value": "210000"
}, {
"key": "吉林省",
"value": "220000"
}, {
"key": "黑龍江省",
"value": "230000"
}, {
"key": "上海",
"value": "310000"
}, {
"key": "江蘇省",
"value": "320000"
}, {
"key": "浙江省",
"value": "330000"
}, {
"key": "安徽省",
"value": "340000"
}, {
"key": "福建省",
"value": "350000"
}, {
"key": "江西省",
"value": "360000"
}, {
"key": "山東省",
"value": "370000"
}, {
"key": "河南省",
"value": "410000"
}, {
"key": "湖北省",
"value": "420000"
}, {
"key": "湖南省",
"value": "430000"
}, {
"key": "廣東省",
"value": "440000"
}, {
"key": "廣西壯族自治區(qū)",
"value": "450000"
}, {
"key": "海南省",
"value": "460000"
}, {
"key": "重慶",
"value": "500000"
}, {
"key": "四川省",
"value": "510000"
}, {
"key": "貴州省",
"value": "520000"
}, {
"key": "云南省",
"value": "530000"
}, {
"key": "西藏自治區(qū)",
"value": "540000"
}, {
"key": "陜西省",
"value": "610000"
}, {
"key": "甘肅省",
"value": "620000"
}, {
"key": "青海省",
"value": "630000"
}, {
"key": "寧夏回族自治區(qū)",
"value": "640000"
}, {
"key": "新疆維吾爾自治區(qū)",
"value": "650000"
}, {
"key": "香港特別行政區(qū)",
"value": "810000"
}, {
"key": "澳門特別行政區(qū)",
"value": "820000"
}, {
"key": "臺(tái)灣省",
"value": "710000"
}]