Ajax 三级联动省市县

第一种

html
<div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>小区地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
            <select class="select" name="fang_province" size="1" id="fang_province">
                <option value="">==请选择省份==</option>
                @foreach($getCity as $val)
                    <option value="{{$val->id}}">{{$val->name}}</option>
                @endforeach
            </select>
            </span>
                <span class="select-box" style="width:150px;">
            <select class="select" name="fang_city" size="1" id="fang_city">
                <option value="">==请选择市==</option>
            </select>
            </span>
                <span class="select-box" style="width:150px;">
            <select class="select" name="fang_region" size="1" id="fang_region">
                <option value="">==请选择县==</option>
            </select>
            </span>
            </div>
        </div>

js
$('#fang_province').change(function () {
            let id = $(this).val();
            let _this=$(this);
            $.ajax({
                url: 'fangCreate',
                data: {id: id},
                type:'get',
                success: function (e) {
                    $('#fang_city option').not(':first-child').remove();
                    $('#fang_region option').not(':first-child').remove();
                    $(e).each(function (key, item){
                        $('#fang_city').append("<option value=" + item.id + ">" + item.name + "</option>")
                    })

                }
            })
        })
        $('#fang_city').change(function () {
            let id = $(this).val();
            $.ajax({
                url: 'fangCreate',
                data: {id: id},
                success: function (e) {
                    $('#fang_region option').not(':first-child').remove();
                    $(e).each(function (key, item) {
                        $('#fang_region').append("<option value=" + item.id + ">" + item.name + "</option>")
                    })
                }
            })
        })

第二种

html
<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
            <div class="formControls col-xs-4 col-sm-4">
               省： <select name="fang_province" style="width: 100px;" id="fang_province">
                    <option value="">==请选择省==</option>
                    @foreach($data['cityData'] as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                </select>
               市： <select name="fang_city" id="fang_city" style="width: 100px;">
                    <option value="">==市==</option>
                </select>
               区： <select name="fang_region" id="fang_region" style="width: 100px;">
                    <option value="">==区/县==</option>
                </select>
            </div>

js
$("#fang_province,#fang_city").change(function () {
        let id = $(this).val();
        let _this = $(this);
        console.log(id);
        $.ajax({
            type: 'get',
            url: "fangCreate",
            data: {
                id: id
            },
            success: function (e) {
                console.log(e)
                _this.nextAll("select").find("option").not(":first-child").remove();
                e.map(function (item) {
                    _this.next("select").append('<option value=' + item.id + '>' + item.name + '</option>')
                })
            }
        })
    })

php
 public function fangCreate(Request $request)
    {
        if ($request->ajax()) {
            $ $data = CityModel::where('pid', $request->get('id'))->get(['id', 'name']);
            return $data;
        }
        return view('fangattr.fang-add');
    }

本作品采用《CC 协议》，转载必须注明作者和本文链接