layui 三级联动，简单实现

本文采用   TP5.0  框架 

html：

<div class="layui-form-item">
    <div class="layui-form-label">地址</div>
    <div class="layui-input-inline"  style="width: 200px;">
        <select name="province" id="province" lay-filter="province">
            <option value="0">请选择省</option>
            {volist name="region_province" id="cate"}
            <option value="{$cate.regionNo}">{$cate.regionName}</option>
            {/volist}
        </select>
    </div>
    <div class="layui-input-inline"  style="width: 200px;">
        <select name="city" id="city" lay-filter="city">
            <option value="0">请选择市</option>
        </select>
    </div>
    <div class="layui-input-inline"  style="width: 200px;">
        <select name="area" id="area" lay-filter="area">
            <option value="0">请选择县</option>
        </select>
    </div>
</div>

js：

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

//三级联动市
form.on('select(province)',function(data){
    console.log(data);
    $.ajax({
        type: "POST",
        url: "{:url('city_data')}",
        // data: data.field,
        data: {id:data.value},
        dataType: "json",
        success: function(msg){
            console.log(msg)
            var optionstring = "";
            $('#city').html('<option value="0">请选择市</option>');
            $('#area').html('<option value="0">请选择县</option>');
            $.each(msg,function(i,item){
                optionstring +="<option value="+item.regionNo+" >" + item.regionName + "</option>";
            })
            $('#city').html('<option value="0">请选择市</option>'+optionstring);
            form.render('select');
        }
    });
})
//三级联动县
form.on('select(city)',function(data){
    console.log(data);
    $.ajax({
        type: "POST",
        url: "{:url('area_data')}",
        // data: data.field,
        data: {id:data.value},
        dataType: "json",
        success: function(msg){
            console.log(msg)
            var optionstring = "";
            $.each(msg,function(i,item){
                optionstring +="<option value="+item.regionNo+" >" + item.regionName + "</option>";
            })
            $('#area').html('<option value="0">请选择县</option>'+optionstring);
            form.render('select');
        }
    });
})

获取val值
var province     = $('#province').val();
var city         = $('#city').val();
var area         = $('#area').val();

 控制器

public function region(){
    $region_province = Db('region')->where(['parentNo'=>['=',0]])->select();
    $this->assign('region_province',$region_province);
    return $this->fetch();
}

 

 分享学习过程

--------------------

还是有些bug的 省市区都会有数据，所以 可以加一些  if判断去限制查询的展示。

希望大佬们可以提一些意见。