ajax结合php简单的城市三级联动

Posted 2020-10-06 guoke1970s

//ajax代码
  $(‘#pro‘).change(function () {
        var id = $(this).val();
        if (id == 0) {
            $(‘#city‘).html(‘<option value="0">请选择城市</option>‘);
            return false;
        }
        $.get(‘/bre/ajaxCity‘, {id: id}, function (data) {
            var html = ‘‘;
            var area = ‘‘;
            $.each(data.city, function (k, v) {
                html += ‘<option value="‘ + v.id + ‘">‘ + v.name + ‘</option>‘
            });
            $.each(data.area, function (key, value) {
                area += ‘<option value="‘ + value.id + ‘">‘ + value.name + ‘</option>‘
            })
            $(‘#city‘).html(html);
            $(‘#area‘).html(area);
        })
    })
    $(‘#city‘).change(function () {
        var id = $(this).val();
        $.get(‘/bre/ajaxArea‘, {id: id}, function (data) {
            var html = ‘‘;
            $.each(data, function (i, n) {
                html += ‘<option value="‘ + n.id + ‘">‘ + n.name + ‘</option>‘
            })
            $("#area").html(html);
        })
    })
})
//后端代码

/**
 * 城市联动
 */
public function ajaxCity(Request $request)
{
    $id = $request->id;
    $city = DistrictModel::where(‘upid‘, $id)->get();
    $area = DistrictModel::where(‘upid‘, $city[0][‘id‘])->get();
    return compact(‘city‘, ‘area‘);

}

public function ajaxArea(Request $request)
{
    $id = $request->id;
    $area = DistrictModel::where(‘upid‘, $id)->get();
    return $area;
}