layui弹出层+联动下拉框

本人最近在做前端开发项目,用到了layui框架。

其中在弹出层,弹出内容为表单,表单中有联动下拉框的时候遇到了不小的问题。搜遍了百度,社区均无果,好在在社区提问了之后,有个兄弟及时帮我解决了问题。在此特别感谢一下他!!!要不是他我的实习进度要拖太久了。

 

这边记录一下在开发弹出层+联动下拉框的时候遇到的一些问题吧

1.由于我的表单中的是放在<body>之外的,这里参考的是layui官方文档中的建议,它们建议放在body之外,这样不会被其他的元素所影响。所以在<div>中添加了display:none,这里的话在layer.open中需要使用content:$('#id'),来加载表单,否则会出现在监听一级菜单的时候,二级菜单的内容无法添加进去的情况。如果使用的是$('#id').html的话,那么子级菜单的内容无法添加进去。

2.需要将$.ajax或者$.get设置为同步,如果你获取的内容太多的情况下,js的代码执行是顺序来的,所以有可能在form.render()之后,才完整的获取到全部的数据,也就自然没办法正确的append到option中了。

3.至于网上所说的form.render(),form.render('select')等方法渲染我就不提了。

这里主要提到的是比较少见的问题吧。

希望有帮助。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
layui弹出中,可以使用 form 模块的 select 组件来实现三级联动下拉框。具体步骤如下: 1. 在 HTML 中添加 select 标签,设置 id 和 lay-filter 属性: ``` <select id="province" lay-filter="province"> <option value="">请选择省份</option> <option value="1">广东省</option> <option value="2">江苏省</option> <!-- 其他省份 --> </select> <select id="city" lay-filter="city"> <option value="">请选择城市</option> <!-- 根据选择的省份动态添加城市选项 --> </select> <select id="district" lay-filter="district"> <option value="">请选择区县</option> <!-- 根据选择的城市动态添加区县选项 --> </select> ``` 2. 在弹出中打开 select 组件,需要注意的是,需要在 success 回调函数中调用 form.render('select') 方法: ``` layer.open({ type: 1, title: '三级联动下拉框', content: $('#form'), success: function(layero, index){ form.render('select'); } }); ``` 3. 使用 jQuery 监听省份 select 的 change 事件,根据选择的省份动态添加城市选项: ``` form.on('select(province)', function(data){ var provinceId = data.value; if (provinceId) { $.ajax({ url: '/api/city?provinceId=' + provinceId, success: function(data){ var html = '<option value="">请选择城市</option>'; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } $('#city').html(html); $('#district').html('<option value="">请选择区县</option>'); form.render('select'); } }); } else { $('#city').html('<option value="">请选择城市</option>'); $('#district').html('<option value="">请选择区县</option>'); form.render('select'); } }); ``` 4. 同样地,使用 jQuery 监听城市 select 的 change 事件,根据选择的城市动态添加区县选项: ``` form.on('select(city)', function(data){ var cityId = data.value; if (cityId) { $.ajax({ url: '/api/district?cityId=' + cityId, success: function(data){ var html = '<option value="">请选择区县</option>'; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } $('#district').html(html); form.render('select'); } }); } else { $('#district').html('<option value="">请选择区县</option>'); form.render('select'); } }); ``` 需要注意的是,上述代码中的 ajax 请求是示意代码,需要根据实际情况进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值