thinkphp 实现三级联动

最新推荐文章于 2023-05-20 17:39:46 发布

锕豪513

最新推荐文章于 2023-05-20 17:39:46 发布

阅读量378

点赞数

文章标签： php thinkphp

本文链接：https://blog.csdn.net/lh25946/article/details/119087899

版权

路由代码

//三级联动
Route::group(function (){
    //获取城市
    Route::get('city','City/city');
    //根据id 获取详细地址
    Route::get('citys','City/citys');
    //添加
    Route::post('cityadd','City/cityadd');
});

后台代码

//城市的
    public function city(){
        //查询 pid 等于o的 就是 所有的城市
        $arr= CityModel::where('pid','=',0)->select();
        //传送给视图
        return view('city/city',compact('arr'));
    }

    //获取城市id
    //GET /fang/_search
    public function citys(Request $request){
        $data = CityModel::where('pid',$request->get('id'))->field('id,name')->select();
        return $data;
    }

    //添加城市
    public function cityadd(){
        $post=input('post.');
        $resadd=Detail::create($post);
        if($resadd){
            return json(['code'=>200,'msg'=>'添加成功','data'=>$resadd]);
        }else{
            return json(['code'=>400,'msg'=>'添加失败','data'=>null]);
        }
    }

html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>房源添加</title>
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
<form action="{{route('admin.fangaddres')}}" method="post">
    


    请选择地址

    <select name="fang_province" style="width: 100px;" onchange="selectCity(this,'fang_city')">
        <option value="0">==请选择省==</option>
       {foreach $arr as $k=>$v}
        <option value="{$v->id}">{$v->name}</option>
        {/foreach}
    </select>

    <select name="fang_city" id="fang_city" style="width: 100px;" onchange="selectCity(this,'fang_region')">
        <option value="0">==市==</option>
    </select>

    <select name="fang_region" id="fang_region" style="width: 100px;">
        <option value="0">==区/县==</option>
    </select>



    <button type="submit" class="btn btn-primary">添加房源</button>
</form>
</body>
</html>
<script src="/jquery/jquery-3.3.1.min.js"></script>

<script>
    // 富文本编辑器
    var ue = UE.getEditor('fang_body', {
        initialFrameHeight: 200
    });
    function selectCity(obj, selectName) {
        // 得到选中的值
        let value = $(obj).val();
        // 以省份ID得到市 发起ajax请求
        $.get("{:url('City/citys')}", {id: value}).then(jsonArr => {
            let html = '<option value="0">==市==</option>';
            // 循环 map  for  for in    for of    $.each
            jsonArr.map(item => {
                var {id, name} = item;
                html += `<option value="${id}">${name}</option>`;
            });
            $('#' + selectName).html(html);
        });

    }
    // 富文本编辑器
    var ue = UE.getEditor('fang_body', {
        initialFrameHeight: 200
    });
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传
        auto: true,
        // swf文件路径
        swf: '/webuploader/Uploader.swf',
        // 文件接收服务端 上传PHP的代码
        server: '{{ route('admin.fangfile') }}',
        // 文件上传是携带参数
        formData: {
            _token: '{{csrf_token()}}'
        },
        // 文件上传是的表单名称
        fileVal: 'file',
        // 选择文件的按钮
        pick: {
            id: '#picker',
            // 是否开启选择多个文件的能力
            multiple: true
        },
        // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: true,
        duplicate:true
    });
    // 上传成功时的回调方法
    uploader.on('uploadSuccess', function (file, ret) {
        // 解决表单提交时，图片以#隔开解决
        let val = $('#fang_pic').val();

        let tmp = val + '#' + ret.url;

        $('#fang_pic').val(tmp);

        // 图片显示
        let imglist = $('#imglist');
        // 注：一定要用追加还是不html覆盖
        let html = `
            <div style="position: relative;;width:100px;">
                <img src="${ret.url}" style="width:100px;" />
                <strong onclick="delpic(this,'${ret.url}')" style="position: absolute;right: 2px;top: 2px;color: white;font-size: 20px;">X<strong>
            </div>
        `;
        imglist.append(html);
    });


</script>