Laravel Ajax下拉示例

Posted 2021-03-27

有人可以分享laravel ajax dropdown的工作示例。有很多关于可靠下拉列表的例子，但是我想要只有一个列的简单下拉，我有两个表老师和国家，当教师档案打开时我想要使用ajax下拉国籍。我没有ajax就完成了，但我不知道如何处理ajax。没有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

控制器：

$nations = nation::all();

答案

为您的方法创建一条路线，以获取所有国家 -

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

在控制器中为上述路径创建一个方法 -

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

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

在html中添加这样的选择框 -

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

如果您想根据变量自动选择选项，那么您可以这样做 -

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

然后在HTML中添加此脚本以在页面加载时获取国家/地区列表 -

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

另一答案

<select class="form-control" name="nation_id" id="nation_id">
          <option value="">Select nation</option>
           @foreach($nations as $nation) 
            <option value="{{ $nation->nation_id }}">{{ $nation->nation_name }}  </option>
          @endforeach
</select>

<select class="form-control" name="teacher" id="teacher">
</select>

现在的ajax代码：

<script type="text/javascript">
$('#nation_id).change(function(){
    var nid = $(this).val();
    if(nid){
        $.ajax({
           type:"get",
           url:"{{url('/getTeacher)}}/"+nid,
           success:function(res)
           {       
                if(res)
                {
                    $("#teacher").empty();
                    $("#state").append('<option>Select Teacher</option>');
                    $.each(res,function(key,value){
                        $("#teacher").append('<option value="'+key+'">'+value+'</option>');
                    });
                }
           }

        });
        }
});
</script>

现在在控制器文件中;

public function getTeacher($id)
{
    $states = DB::table("teachers")
                ->where("nation_id",$id)
                ->pluck("teacher_name","teacher_id");
    return response()->json($teachers);    
}

最后一个路径文件：

Route::get('/getTeacher/{id}','TeachersController@getTeacher');

希望这会有效.. 祝好运...