layui 三级联动下拉框更新时回显问题

本文记录了使用layui实现省市区三级联动下拉框时遇到的问题及解决办法,特别是当选项为'请选择'且value为空字符串时,如何确保在更新时正确回显。
摘要由CSDN通过智能技术生成

最近接触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(

layui是一款简洁易用的前端UI框架,在layui中提供了三级联动下拉框的组件。三级联动下拉框即将三个下拉框进行联动,第一个下拉框选择一个项后,第二个下拉框根据第一个下拉框的选项动态展示相应的选项,第三个下拉框同理。 使用layui三级联动下拉框非常简单,在HTML中,我们需要定义三个select元素,以及它们各自的id和class属性,如下所示: ```html <select name="province" id="province" lay-filter="province"> <option value="">请选择省份</option> <!-- 省份选项 --> </select> <select name="city" id="city" lay-filter="city" disabled> <option value="">请选择城市</option> <!-- 城市选项 --> </select> <select name="area" id="area" lay-filter="area" disabled> <option value="">请选择县/区</option> <!-- 县/区选项 --> </select> ``` 在JavaScript中,我们需要引用layui和对应的模块,如form模块和jquery库。接着,我们可以通过layuiform.on(事件, 回调函数)方法监听每个下拉框的change事件,并在回调函数中编写对应的联动代码,如下所示: ```javascript layui.use(['jquery', 'form'], function(){ var $ = layui.jquery, form = layui.form; //监听省份下拉框的change事件 form.on('select(province)', function(data){ //动态获取城市数据 //省份value值 var value = data.value; //发送ajax请求,获取对应的城市数据 $.get('url', {provinceId: value}, function(res){ //将城市选项插入到城市下拉框中 var options = '<option value="">请选择城市</option>'; for(var i=0; i<res.length; i++){ options += '<option value="'+res[i].id+'">'+res[i].name+'</option>'; } $('#city').html(options); //更新渲染 form.render(); //启用城市下拉框 $('#city').prop('disabled', false); }); //清空县/区下拉框 $('#area').html('<option value="">请选择县/区</option>'); //禁用县/区下拉框 $('#area').prop('disabled', true); }); //监听城市下拉框的change事件 form.on('select(city)', function(data){ //动态获取县/区数据 //城市value值 var value = data.value; //发送ajax请求,获取对应的县/区数据 $.get('url', {cityId: value}, function(res){ //将县/区选项插入到县/区下拉框中 var options = '<option value="">请选择县/区</option>'; for(var i=0; i<res.length; i++){ options += '<option value="'+res[i].id+'">'+res[i].name+'</option>'; } $('#area').html(options); //更新渲染 form.render(); //启用县/区下拉框 $('#area').prop('disabled', false); }); }); }); ``` 这样,就实现了一个简单的三级联动下拉框。需要注意的是,动态获取数据的方式可能因项目而异,此处仅提供一个简单的示例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值