Laravel Ajax下拉示例

Question

can someone please share working example of laravel ajax dropdown. there are so many examples about dependable dropdown, but i want simple dropdown of only one column, i have two tables teacher and nation, when teacher profile is open i want dropdown of nationality using ajax. i have done it without ajax, but i don't know how to do with ajax. without ajax:

<select name="nation_id" class="custom-select" >
    <option selected value=" ">Choose...</option>
    @foreach($nations as $nations)
    <option value="{{@$nation_id}}"  {{@$teacher->nation_id== $nations->id ? 'selected' : ''}} >{{@$nations->nation}}</option>
@endforeach

Controller:

$nations = nation::all();

Answer 1

Create a route for your method which will fetch all the nations-

Route::get('nations-list', 'YourController@method');

Create a method in your controller for the above route-

public function method()
{
    $nations = Nation::all()->pluck('nation', 'id');

    return response()->json($nations)
}

Add a select box like this in your HTML-

<select id="nation_id" name="nation_id"></select>

If you want to auto select the option based on a variable then you can do this-

<input type="hidden" name="teacher_nation_id" id="teacher_nation_id" value="{{ $teacher->nation_id ?? '' }}">

And then add this script in your HTML to fetch the nation list on page load-

<script>
$(document).ready(function($){
    $.get('nations-list', function(data) {
        let teacher_nation_id = $('#teacher_nation_id').val();
        let nations = $('#nation_id');
        nations.empty();

        $.each(data, function(key, value) {
            nations.append("<option value='"+ key +"'>" + value + "</option>");
        });

        nations.val(teacher_nation_id); // This will select the default value
    });
});
</script>