PHP三级联动

html部分
<div class="layui-form-item" >
    <label class="layui-form-label"><font style="color: red">*</font>所在地区</label>
    <div class="layui-input-block" style="width:150px;display: inline-block;margin-left: 20px;">
        <select id="province" lay-filter="province" name="province_id">
            <option value="0">请选择省</option>
            <?php foreach ($province_data as $key=>$val) {?>
            <option value="<?=$val['province_id']?>"><?=$val['province']?></option>
            <?php } ?>
        </select>
    </div>
    <div class="layui-input-block" style="width:150px;display: inline-block;margin-left: 10px;">
        <select id="city" lay-filter="city" name="city_id">

        </select>
    </div>
    <div class="layui-input-block" style="width:150px;display: inline-block;margin-left: 10px;">
        <select id="area" lay-filter="area" name="area_id">

        </select>
    </div>
</div>

js部分

//三级联动
layui.use('form', function(){
    var form = layui.form;
    //监听省
    form.on('select(province)', function(data){
        var province_id = data.value;
        if (province_id == '') {
            layer.msg('请选择省',{icon: 2});
            return false;
        }
        //查询省下面的市
        $.post('get-city',{'province_id':province_id},function (res) {
            var html = '<option value="0">请选择市</option>';
            $.each(res, function (i, v){
                html += '<option value="'+v.city_id+'">'+v.city+'</option>';
            });
            //给市赋值
            $("#city").html(html);
            //重新渲染select
            form.render('select');
        });
    });
    //监听市
    form.on('select(city)', function(data){
        city_id = data.value;
        if (city_id == '') {
            layer.msg('请选择市',{icon: 2});
            return false;
        }
        //查询市下面的区
        $.post('get-area',{'city_id':city_id},function (res) {
            var html = '<option value="0">请选择区</option>';
            $.each(res, function (i, v){
                html += '<option value="'+v.area_id+'">'+v.area+'</option>';
            });
            //给市赋值
            $("#area").html(html);
            //重新渲染select
            form.render('select');
        });
    });

});

php部分：

//根据省id获取市
public function getCity($params)
{
    $province_id = (int) $params['province_id'];
    $cities = self::find()->select(['city_id','city'])->where(['province_id' => $province_id])->asArray()->all();
    return $cities;
}

 

//根据市id获取区
public function getArea($params)
{
    $city_id = (int) $params['city_id'];
    $areas = self::find()->select(['area_id', 'area'])->where(['city_id'=>$city_id])->asArray()->all();
    return $areas;
}

 

思路部分

1.前端默认遍历省份信息

2.监听省份下拉框

3.获取省份id查询城市表

4.获取到城市信息后追加到城市下拉框

5.监听城市下拉框

6.获取城市id查询地区表

7.获取到地区信息后追加到地区下拉框

8.高手是不会读到这里的