Jquery Laravel 5和AJAX动态选择菜单取决于先前的选择

尝试创建由数据库中的数据填充的选择菜单。在第一个菜单中选择值时，第二个菜单的内容将取决于在第一个菜单中所做的选择

<div class="form-group">
    {{Form::label('company', 'Company')}}
    <select selected="" class="form-control" id="company" name="university">
        <option disabled selected value> -- select an option -- </option>
        @foreach($company as $key)
            <option>{{$key->Id}}</option>
        @endforeach
    </select>
</div>
<div class="form-group">
    @include('includes.partial', ['department' => $department])
</div>

控制器方法：

public function getContent(Request $request, $value)
{
    $department = DB::table('department')->where('company_id', '=', $value)->get();

    return View::make('admin.package.create')
        ->with('department', $department);

}

当输入url

http://localhost/exchange/exchange/public/home/package/create/10

例如，在浏览器中手动更新页面，并用正确的值填充第二个选择菜单。但是，通过在第一个菜单中选择一个值来执行此操作时，要么什么也不发生，要么浏览器控制台返回一个错误

GEThttp://localhost/exchange/exchange/public/home/package/create/create/10 404（未找到）

---

这里有什么问题？奇怪的是，当手动输入url时，该功能起作用。

可能是ajax请求使用的url有缺陷（您应该使用完整的uri，而不使用主机），或者您的表单缺少令牌

将csrf标记添加到html标题中

<meta name="csrf-token" content="{{ csrf_token() }}">

更新你的js请求

function setListener() {
    $('#company').change(function() {
        let value = $(this).val();
        alert(value);
        console.log(value.length);
        $.ajax({
            url:"/exchange/exchange/public/home/package/create/" + value,
            method: "GET",
            success:function(result) {
                $('#department').empty();
                $('#department').html(result);
                alert('result');
            }
        });

    });
}

解决方法：

<script>
    $('#company').on('change', function(e) {
        console.log(e);

        let company_id = e.target.value;

        $.get('create/sub?company_id=' + company_id, function(data) {
            console.log(data);
            $('#department').empty();
            $.each(data, function(index, Obj) {
                $('#department').append('<option value="'+Obj.Id+'">'+Obj.name+'</option>')
            })
        })
    });    
</script>

---

再想一想，这肯定是错误的url问题，但您应该使用csrf保护，因此我不会更新我的答案，希望您使用额外的保护；）当然，那里会有csrf令牌，但这是为了测试功能是否正常工作。是的，我想我使用url的方式有问题。

<meta name="csrf-token" content="{{ csrf_token() }}">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

function setListener() {
    $('#company').change(function() {
        let value = $(this).val();
        alert(value);
        console.log(value.length);
        $.ajax({
            url:"/exchange/exchange/public/home/package/create/" + value,
            method: "GET",
            success:function(result) {
                $('#department').empty();
                $('#department').html(result);
                alert('result');
            }
        });

    });
}

<script>
    $('#company').on('change', function(e) {
        console.log(e);

        let company_id = e.target.value;

        $.get('create/sub?company_id=' + company_id, function(data) {
            console.log(data);
            $('#department').empty();
            $.each(data, function(index, Obj) {
                $('#department').append('<option value="'+Obj.Id+'">'+Obj.name+'</option>')
            })
        })
    });    
</script>

public function getContent(Request $request)
{
    $company_id = $request->input('company_id');
    $department = Department::where('company_id', '=', $company_id)->get();

    return response()->json($department);

}