Laravel 8 dependent dropdown with Ajax

Question

I wanted to create a dependent dropdown menu using Laravel 8 and Ajax. My first box works, but the second and third boxes don't show any options. I'm brand new to Laravel, so I don't understand where the issues are. Please help me to resolve these issues.

Blade/View

<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);
    }
}

This is an issue with Jquery not able to trigger events on dynamically loaded content. Ref: https://stackoverflow.com/questions/17620211/jquery-events-not-working-on-ajax-loaded-content — harish durga, Feb 17 '22 at 13:16

score 0 · Answer 1 · answered Feb 17 '22 at 14:11

Generally, what you are trying to achieve should work out of the box but if the script are not loading then try putting your logic inside getScript. Let the main script call be where it is. And this way to reload the script.

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

ref: https://api.jquery.com/jquery.getscript/

Laravel 8 dependent dropdown with Ajax

1 Answers1