layui select 赋值，取值和监听事件（省市区三级联动）

省市县三级联动下拉框

最新推荐文章于 2022-06-16 18:46:53 发布

原创最新推荐文章于 2022-06-16 18:46:53 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#layui #select #js

layui 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个基于layui框架实现的省市县三级联动下拉菜单的JavaScript代码示例。通过Ajax请求获取省市区数据，并在用户选择省或市时动态更新下级菜单选项。此代码适用于需要地区选择功能的表单。

layui.use(['form', 'upload', 'layer'], function () {
var form = layui.form;
//检查项目添加到下拉框中
$.ajax({
url: '/User/GetLevelThree',
dataType: 'json',
data: { "action_post": "GetProvince" },
type: 'POST',
success: function (data) {
var jsons = $.parseJSON(data);
$.each(jsons, function (index, item) {
$('#Province').append(new Option(item.name, item.code));// 下拉菜单里添加元素
});
layui.form.render('select', 'Province');
}
})
form.on('select(Province)', function (data) {
$.ajax({
type: "POST",
url: "/User/GetLevelThree",
data: { "action_post": "GetCity", "provinceid": data.value },
async: false,
success: function (datas) {
var jsons = $.parseJSON(datas);
$("#city").empty();
$.each(jsons, function (index, item) {
$('#city').append(new Option(item.name, item.code));// 下拉菜单里添加元素
});
form.render('select');
}
})
});
form.on('select(city)', function (data) {
$.ajax({
type: "POST",
url: "/User/GetLevelThree",
data: { "action_post": "GetCounty", "cityid": data.value },
async: false,
success: function (datas) {
var jsons = $.parseJSON(datas);
$("#county").empty();
$.each(jsons, function (index, item) {
$('#county').append(new Option(item.name, item.code));// 下拉菜单里添加元素
});
form.render('select');
}
})
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
});