layui 实现 城市联动

<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input"  placeholder="请输入标题" value="{$row.title|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">缩略图</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image" class="layui-input layui-col-xs6"   placeholder="请上传缩略图" value="{$row.image|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                    <span><a class="layui-btn layui-btn-normal" id="select_image" data-upload-select="image" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" class="layui-input"  placeholder="请输入描述" value="{$row.description|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择省市</label>
            <div class="layui-input-inline">
              <select name="province" lay-filter="magazine">
                <option value="">请选择省</option>
                {foreach $provinceList as $key=>$val}
                <option value="{$val.id}" {if $val.name == $row.province}  selected {/if}>{$val.name}</option>
                {/foreach}
              </select>
            </div>
            <div class="layui-input-inline">
              <select name="city">
                <option value="{$row.city}">{$row.city}</option>
              </select>
            </div>
          </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地区</label>
            <div class="layui-input-block">
                <input type="text" name="address" class="layui-input"  placeholder="请输入地区" value="{$row.address|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" class="layui-input"  placeholder="请输入电话" value="{$row.phone|default=''}">
            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>

<script>
    layui.use('form', function(){
        var form = layui.form;
        form.on('select(magazine)', function(data){
            var areaId=data.elem.value;
            $.ajax({
                type: 'POST',
                url: "/api/member/getCity",
                data: {parent_id:areaId},
                dataType:  'json',
                success:function(e){
                    console.log(e.data);
                    //empty() 方法从被选元素移除所有内容
                    $("select[name='city']").empty();
                    var html = "<option value=''>请选择市<option>";
                    $(e.data).each(function (v, k) {
                        html += "<option value='" + k.city_id + "'>" + k.name + "</option>";
                    });
                    //把遍历的数据放到select表里面
                    $("select[name='city']").append(html);
                    //从新刷新了一下下拉框
                    form.render('select');      //重新渲染
                }
            });
        });
 
    });
</script>

PHP 代码

        /**
     * @NodeAnotation(title="获取城市")
     */
    public function getCity()
    {
        $param = $this->request->param();
        $where = [];
        if (isset($param['parent_id']) && $param['parent_id'] != '') {
            $where['upid'] = $param['parent_id'];
        } else {
            $where['level'] = 0;
        }
        $city = Db::name('city')->field('id,level,name,upid')->where($where)->select();
        return Json(['code' => 200, 'msg' => '获取成功', 'data' => $city]);
    }