带有Ajax的Laravel 8依赖下拉列表

Question

我想使用Laravel 8和Ajax创建一个依赖的下拉菜单。我的第一个框可以工作，但第二个和第三个框没有显示任何选项。我是拉拉威尔的新手，所以我不明白问题在哪里。请帮我解决这些问题。

刀片/视图

<form>
<div class="form-group mb-3">
<select id="country-dd" class="form-control">
<option value="">Select Country</option>
@foreach ($division as $data)
<option value="{{$data->id}}">
{{$data->division_name}}
</option>
@endforeach
</select>
</div>
<div class="form-group mb-3">
<select id="state-dd" class="form-control">
</select>
</div>
<div class="form-group">
<select id="city-dd" class="form-control">
</select>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#country-dd').on('change', function () {
var idDivision = this.value;
$("#state-dd").html('');
$.ajax({
url: "{{url('api/fetch-distric')}}",
type: "POST",
data: {
division_id: idDivision,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (result) {
$('#state-dd').html('<option value="">Select State</option>');
$.each(result.distric, function (key, value) {
$("#state-dd").append('<option value="' + value
.id + '">' + value._name + '</option>');
});
$('#city-dd').html('<option value="">Select City</option>');
}
});
});
$('#state-dd').on('change', function () {
var idDistric = this.value;
$("#city-dd").html('');
$.ajax({
url: "{{url('api/fetch-upzaila')}}",
type: "POST",
data: {
distric_id: idDistric,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (res) {
$('#city-dd').html('<option value="">Select City</option>');
$.each(res.upazilas, function (key, value) {
$("#city-dd").append('<option value="' + value
.id + '">' + value.upazila_name + '</option>');
});
}
});
});
});
</script>

控制器

class DropdownController extends Controller
{
public function index()
{
$data['division'] = Division::get(["division_name", "id"]);
return view('index', $data);
}
public function fetchDistric(Request $request)
{
$data['districs'] = Distric::where("division_id", 
$request->division_id)->get(["distric_name", "id"]);
return response()->json($data);
}
public function fetchUpazila(Request $request)
{
$data['upazilas'] = Upazila::where("distric_id", 
$request->distric_id)->get(["upazila_name", "id"]);
return response()->json($data);
}
}

Answer 1

通常，您试图实现的目标应该是开箱即用的，但如果脚本没有加载，请尝试将逻辑放入getScript中。让主脚本调用在它所在的位置。这样可以重新加载脚本。

<script>
var url = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
$.getScript( url, function() {
$('#country-dd').on('change', function () {
// Logic here
});
});
</script>

参考：https://api.jquery.com/jquery.getscript/