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]);}