Laravel Ajax 下拉示例

Posted 2023-03-14

【中文标题】Laravel Ajax 下拉示例

【英文标题】：Laravel Ajax dropdown example

【发布时间】：2019-07-27 19:07:49

【问题描述】：

有人可以分享 laravel ajax 下拉列表的工作示例吗？关于可靠下拉列表的例子很多，但我想要只有一列的简单下拉列表，我有两张表教师和国家，当教师资料打开时，我想要使用 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();

【问题讨论】：

Laravel dynamic dropdown country and state的可能重复

我需要简单的一栏下拉菜单。以上分享的答案大约是两张桌子。

【参考方案1】：

为您的方法创建一个将获取所有国家/地区的路线-

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>

【讨论】：

我试过你的代码它显示空下拉菜单，你能检查一下吗。

【参考方案2】：

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

希望这会奏效.. 祝你好运...