Laravel 8 從屬下拉列表 Ajax

Question

我想使用 Laravel 8 和 Ajax 創建一個依賴下拉菜單。我的第一個框有效，但第二個和第三個框不顯示任何選項。 我是 Laravel 的新手，所以我不明白問題出在哪里。 請幫助我解決這些問題。

刀片/視圖

<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>

Controller

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/