解决解决layui 三级联动下拉框更新时回显的问题三级联动下拉框更新时回显的问题
最近接触layui，比较简洁美观的一款ui，但也有很多小坑，记录一下实现省市区下拉三级联动更新回显的问题
<%--监听省份选择 --%>
form.on('select(uprovinceId)', function(data){
initCityList('change');
});
这里面有个问题就是 选择的时候 如果 请选择 的value 是“” 空字符串，当选择从河北省变到请选择时不会触发这个监听事件
<script type="text/javaScript">
layui.use(['form'],function(){
var form = layui.form;
<%--监听省份选择 --%>
form.on('select(uprovinceId)', function(data){
initCityList('change');
});
<%--监听城市选择 --%>
form.on('select(ucityId)', function(data){
initDistrictList('change');
});
<%--监听修改提交 --%>
form.on('submit(update)', function(data){
updateAccount();
form.render();
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
<%-- 监听取消按钮 --%>
$(document).on("click",".cancel",function(){
layer.closeAll("page");
});
$(function(){
<%--初始化省份列表 --%>
initProvinceList('init');
initCityList('init');
initDistrictList('init');
});
<%--初始化省份列表 --%>
function initProvinceList(flag){
var provinceId = $("#oldProvinceId").val();
$("#uprovinceId").append("<option value='" + -1 +"'>" + '请选择' + "</option>");
$("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
$("#ucityId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
var url = "${ctx}/admin/getProvinceList.action?ranNum="+Math.random();
$.post(url,{},function(data){
var list = eval(data);
for (i = 0; i < list.length; i++) {
var name = list[i].province;
var id = list[i].id;
if(id == provinceId){
$("#uprovinceId").append("<option value='" + id + "' selected>" + name + "</option>");
}else{
$("#uprovinceId").append("<option value='" + id + "'>" + name + "</option>");
}
}
layui.use(['form'],function(){
var form = layui.form;
form.render();
});
});
}
<%--初始化城市列表 --%>
function initCityList(flag){
var provinceId = $("#uprovinceId").val();
var oldProvinceId = $("#oldProvinceId").val();
if(provinceId == -1 && flag == "init"){
provinceId = oldProvinceId;
}
var cityId = $("#oldCityId").val();
$("#ucityId").empty();
$("#ucityId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
$("#udistrictId").empty();
$("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
var url = "${ctx}/admin/getCityList.action?ranNum="+Math.random();
weixin_38628953
- 粉丝: 6
- 资源: 927
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0