layui select 赋值,取值和监听事件(省市区三级联动)

 layui.use(['form', 'upload', 'layer'], function () {
            var form = layui.form;
            //检查项目添加到下拉框中
            $.ajax({
                url: '/User/GetLevelThree',
                dataType: 'json',
                data: { "action_post": "GetProvince" },
                type: 'POST',
                success: function (data) {
                    var jsons = $.parseJSON(data);
                    $.each(jsons, function (index, item) {
                        $('#Province').append(new Option(item.name, item.code));// 下拉菜单里添加元素
                    });
                    layui.form.render('select', 'Province');
                }
            })
            form.on('select(Province)', function (data) {
                    $.ajax({
                        type: "POST",
                        url: "/User/GetLevelThree",
                        data: { "action_post": "GetCity", "provinceid": data.value },
                        async: false,
                        success: function (datas) {
                            var jsons = $.parseJSON(datas);
                            $("#city").empty();
                            $.each(jsons, function (index, item) {
                                $('#city').append(new Option(item.name, item.code));// 下拉菜单里添加元素
                            });
                            form.render('select');
                        }
                    })
            });
            form.on('select(city)', function (data) {
                $.ajax({
                    type: "POST",
                    url: "/User/GetLevelThree",
                    data: { "action_post": "GetCounty", "cityid": data.value },
                    async: false,
                    success: function (datas) {
                        var jsons = $.parseJSON(datas);
                        $("#county").empty();
                        $.each(jsons, function (index, item) {
                            $('#county').append(new Option(item.name, item.code));// 下拉菜单里添加元素
                        });
                        form.render('select');
                    }
                })
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
            });
        });

 

 

 

 


                <label class="layui-form-label">省份:</label>
                <div class="layui-input-inline" style="width:100px">
                    <select class="layui-select" name="Province" lay-verify="Province" id="Province" lay-filter="Province">
                        <option>请选择</option>
                    </select>
                </div>
                <label class="layui-form-label">市区:</label>
                <div class="layui-input-inline" style="width:100px">
                    <select class="layui-select" name="city" lay-verify="city" id="city" lay-filter="city">
                        <option>请选择</option>
                    </select>
                </div>
                <label class="layui-form-label">区/县:</label>
                <div class="layui-input-inline" style="width:100px">
                    <select class="layui-select" name="county" lay-verify="county" id="county" lay-filter="county">
                        <option>请选择</option>
                    </select>
                </div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值