layui实现省市区联动p

省市区插件是我们项目中常用的，由于layui官方没有联动所以自己做了一个，代码如下

<div class="layui-form-item">
    <label class="layui-form-label">所属省份</label>
    <div class="layui-input-inline" id="one-level">
        <select name="cate_id" lay-filter="one-level">
           <option value="">请选择省</option>
           <option value="3">福建省</option>
           <option value="11">广东</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="cate_id" id="two-level" lay-filter="two-level"></select>
    </div>
    <div class="layui-input-inline">
        <select name="cate_id" id="three-level" lay-filter="three-level"> </select>
    </div></div>

2.js代码

form.on('select(one-level)', function(data){
    if (data.value == '') {
        $("#two-level option").remove();
        $("#three-level option").remove();
        form.render('select');
        return false;
    }
    $.ajax({
        type: "post",
        url: "/control/getAreaList", //接口地址
        data:{parent_id:data.value,type:2},//参数
        success: function(result) {
            result = JSON.parse(result);
            $("#two-level option").remove();
            $('#two-level').append('<option value="">请选择市</option>');
            $.each(result.data, function(k, v) {
                $('#two-level').append('<option value="' + v.id + '">' + v.name + '</option>');
                form.render('select');
            });
        },
    });});form.on('select(two-level)', function(data){
    if (data.value == '') {
        $("#three-level option").remove();
        form.render('select');
        return false;
    }
    $.ajax({
        type: "get",
        url: "/control/getAreaList", //替换为接口地址
        data:{parent_id:data.value,type:3},//参数
        success: function(result) {
            result = JSON.parse(result);
            $("#three-level option").remove();
            $('#three-level').append('<option value="">请选择区</option>');
            $.each(result.data, function(k, v) {
                $('#three-level').append('<option value="' + v.id + '">' + v.name + '</option>');
                form.render('select');
            });
        },
    });});

打赏 支付宝打赏 微信打赏