时间戳

首页 > 解决方案 > Laravel 5 和 AJAX 动态选择菜单取决于先前的选择

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>

部分的：

{{Form::label('department', 'Department')}}
    <select selected="" class="form-control" id="department" name="department">
        <option disabled selected value> -- select an option -- </option>
        @foreach($department as $key)
            <option>{{$key->name}}</option>
        @endforeach
    </select>

jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        setListener(); 
    });

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

        });
    }
</script>

路线：

Route::get('home/package/create/{value}', 'Admin\PackageController@getContent');

控制器方法：

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

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

}

例如，当在浏览器中手动输入 urlhttp://localhost/exchange/exchange/public/home/package/create/10时，页面会更新，并且第二个选择菜单会填充正确的值。但是当通过在第一个菜单中选择一个值来执行此操作时，要么什么都没有发生，要么浏览器控制台返回一个错误GET http://localhost/exchange/exchange/public/home/package/create/create/10 404 (Not Found)

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

标签： jquerylaravel-5

解决方案

解决了：

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

}

推荐阅读