简单 layui 三级联动

 

 

layui模式的三级联动,二级只需要在复制一边 one 变two


        form.on('select(one)',function (data) {
            var id = data.value;
            $.ajax({
                url:"http://www.second.com/admmin/brand/next?id="+id,
                success:function (e) {
                    $("#three").empty()
                    $item ='<option value="">请选择</option>'
                    $(e.result).each(function (k,v) {
                        $item +=' <option value="'+v.id+'">'+v.cate_name+'</option>'
                    })
                    $('#two').html($item);
                    form.render();
                }
            })
        });
 <select name="one" lay-filter="one" lay-verify="required">
                <option value="">请选择</option>
                {foreach $cates as $v}
                <option value="{$v.id}">{$v.cate_name}</option>
                {/foreach}
            </select>
 
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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库。接着,我们可以通过layui的form.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、付费专栏及课程。

余额充值