Layui二级联动绑定数据

html代码:

 
               <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">主类型</label>
                        <div class="layui-input-block">
                            <select name="ParentIdSelect" id="ParentIdSelect" lay-verify="" lay-search="" lay-filter="ParentIdSelect"></select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">子类型</label>
                        <div class="layui-input-block">
                            <select name="ChildIdSelect" id="ChildIdSelect"  lay-filter="ChildIdSelect" lay-verify="" lay-search=""></select>
                        </div>
                    </div>
                </div>

js 代码:

  var url = dinf.url + "ParentList";  //写自己的url
    var model = {
        "CompanyId": CId
    }; //需要传入的数据
    var redata = dinf.modelajaxfunPost(url, model); //自己的ajax
 
    //绑定
    if (redata) {
        $("#ParentIdSelect").empty();
        $('#ParentIdSelect').append("<option value=''></option>");
        $.each(redata.data, function (index, item) {
            $('#ParentIdSelect').append("<option value='" + item.Id + "'>" + $.trim(item.Name) + "</option>");
        });
    } else {
        $("#ParentIdSelect").empty();
    }
    layui.form.render("select");
 
 
    //监听父级select框
 
    form.on('select(ParentIdSelect)', function (data) {
        var url = dinf.url + "ChildList";
        var model = {};
        model["ParentId"] = data.value; //传入所需要的父级id以及自己接口需要传的数据
        model["CompanyId"] = CId;
       var  Table_data = dinf.modelajaxfunPost(url, model);
         if (Table_data) {
            $("#ChildIdSelect").empty();
            $('#ChildIdSelect').append("<option value=''></option>");
             $.each(Table_data.data, function (index, item) {
                 $('#ChildIdSelect').append("<option value='" + item.Name + "'>" + $.trim(item.Name) + "</option>");
            });
        } else {
            $("#ChildIdSelect").empty();
        }
         layui.form.render("select");
    });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui是一款基于jQuery的前端UI框架,它提供了丰富的组件和样式,方便开发者快速构建美观的网页界面。layui中并没有直接提供省市二级联动的组件,但我们可以通过layui的select组件和一些自定义的JavaScript代码来实现省市二级联动。 首先,我们需要在页面中引入layui的相关文件,包括layui.js和layui.css。然后,在HTML中创建两个select元素,一个用于选择省份,一个用于选择城市。给这两个select元素分别添加一个id,例如"province"和"city"。 接下来,我们可以使用layui的form组件来渲染这两个select元素,并通过ajax请求获取省份数据填充到省份select中。当选择了省份后,我们可以通过监听省份select的change事件,在事件回调函数中根据选择的省份值发送ajax请求获取对应的城市数据,并将城市数据填充到城市select中。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui省市二级联动</title> <link rel="stylesheet" href="path/to/layui.css"> </head> <body> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">省份</label> <div class="layui-input-block"> <select id="province" lay-filter="province"> <option value="">请选择省份</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-block"> <select id="city" lay-filter="city"> <option value="">请选择城市</option> </select> </div> </div> </div> <script src="path/to/jquery.js"></script> <script src="path/to/layui.js"></script> <script> layui.use(['form'], function() { var form = layui.form; // 渲染省份select $.ajax({ url: 'path/to/province.json', dataType: 'json', success: function(data) { var options = '<option value="">请选择省份</option>'; for (var i = 0; i < data.length; i++) { options += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } $('#province').html(options); form.render('select'); } }); // 监听省份select的change事件 form.on('select(province)', function(data) { var provinceId = data.value; if (provinceId) { // 根据选择的省份发送ajax请求获取城市数据 $.ajax({ url: 'path/to/city.json', dataType: 'json', data: { provinceId: provinceId }, success: function(data) { var options = '<option value="">请选择城市</option>'; for (var i = 0; i < data.length; i++) { options += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } $('#city').html(options); form.render('select'); } }); } else { $('#city').html('<option value="">请选择城市</option>'); form.render('select'); } }); }); </script> </body> </html> ``` 在上面的示例代码中,我们通过ajax请求获取省份数据和城市数据的接口路径分别为"province.json"和"city.json",你可以根据实际情况修改这两个路径。同时,你也需要根据接口返回的数据格式进行相应的处理。 希望以上内容能够帮助到你,如果还有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Xwzzz_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值