layui三级联动

HTML代码:

        <label class="layui-form-label">物流公司</label>
        <div class="layui-input-inline">
            <select class="select" name="company" id="company" lay-filter="company">
                <option value="">--请选择物流公司--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">物流网点</label>
        <div class="layui-input-inline">
            <select id="companyUrl" name="companyUrl" class="select" lay-filter="companyUrl">
                <option value="">--请选择物流公司网点--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">送货人员</label>
        <div class="layui-input-inline">
            <select id="personnel" name="personnel" class="select" lay-filter="personnel">
                <option value="">--请选择送货人员--</option>
            </select>
        </div>
    </div>

script部分代码:

layui.use(['jquery', 'form'], function () {
    var form = layui.form
        , $ = layui.jquery;

    test();
    
    function test() {
        /*$('#company').html("");*/
        $.ajax({
            url: "/aaa/aaa",
            type: "post",
            dataType: "json",
            contentType: "application/json",
            async: false,//同步
            success: function (result) {
                $.each(result.data, function (i, item) {
                    $('#company').append('<option  value=' + item.id + '>' + item.name + '</option>');
                })

            }
        })
        form.render();
    }

    form.on('select(company)', function (data) {
        var id = data.value;
        $('#companyUrl').empty();
        $('#companyUrl').append('<option value="">--请选择物流公司网点--</option>');
        $.ajax({
            url: '/aaa/aaa?id=' + id,//带参数将这个传到后台条件查询方法里面
            type: "post",
            dataType: "json",
            contentType: "application/json",
            async: false,//同步
            success: function (result) {
                if (result.code === "00") {
                    $.each(result.data, function (i, item) {
                        $('#companyUrl').append('<option  value=' + item.id + '>' + item.address + '</option>');
                    })
                } else {
                    $('#companyUrl').empty();
                    $('#companyUrl').append('<option value="">--暂无网点--</option>');
                }
            }
        })
        form.render();

    });


    form.on('select(companyUrl)', function (data) {
        var id = data.value;
        $('#personnel').empty();
        $('#personnel').append('<option value="">--请选择送货人员--</option>');
        $.ajax({
            url: '/aaa/aaa?id=' + id,//带参数将这个传到后台条件查询方法里面
            type: "post",
            dataType: "json",
            contentType: "application/json",
            async: false,//同步
            success: function (result) {
                if (result.code === "00") {
                    $.each(result.data, function (i, item) {
                        $('#personnel').append('<option  value=' + item.id + '>' + item.name + "-" + item.phone + '</option>');
                    })
                } else {
                    $('#personnel').empty();
                    $('#personnel').append('<option value="">--暂无送货人员--</option>');
                }
            }
        })
        form.render();
    })
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值