Laravel 5 Laravel5中动态填充的选择菜单

在一个视图中，我有两个选择菜单，它们由来自两个单独表的数据填充

正在寻找根据第一个选择菜单的值填充第二个选择菜单的方法

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

---

这感觉不太难，但还没有找到任何关于它的好信息。

一种方法是使用javascript。其主要思想是使用第二个select创建一个局部视图，然后在用户在第一个select中更改某些内容时调用它。 为此，您需要有两个视图。主视图将调用具有默认部门集合的第二个视图：

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

以及在ContentController中渲染视图的函数：

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

    return view('contents.partial', [
        'department' => $department
    ])->render();
}

要调用它，您需要一个javascript/jquery来识别控制器中select和fire函数中的更改

<script>
    $(document).ready(function(){
        setListener();    
    });

    function setListener() {
        $('#company').change(function() {
            var value = $(this).val();
            $.get( "/get/content/"+value, function( data ) {
                $('#second-select').empty();
                $('#second-select').append(data);
            });
        });
    }
</script>

---

这是主要的想法，好吗？

您必须使用javascript来实现这一点。如何定义要在第二次选择中加载的一组值？根据选择的公司，如果您要求，将属于所选公司的部门列表加载到第二次选择菜单。实现了您的示例，但局部视图仍然加载所有部门值，而不依赖于先前选择的公司。它是否与部分视图传递的$department列表有关？第一次打开页面时，它将加载默认部门。但当您选择一个选项时，它应该触发一个更改事件并调用getContent函数。在此功能中，您需要根据所选选项筛选所需的部门。要进行测试，请直接从浏览器中调用/get/content/1，然后检查它是否打印出可行的select。调试javascript部分以检查它是否也激发空函数和appenddata函数是个好主意。嗯，是的，猜测可能是javascript的问题，侦听器似乎对第一个选择菜单中的任何更改都没有反应。您已经在项目中使用jquery了吗？如果不是，则需要使用它来调用此函数。尝试在之前包含它，并检查它是否有效

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

    return view('contents.partial', [
        'department' => $department
    ])->render();
}

<script>
    $(document).ready(function(){
        setListener();    
    });

    function setListener() {
        $('#company').change(function() {
            var value = $(this).val();
            $.get( "/get/content/"+value, function( data ) {
                $('#second-select').empty();
                $('#second-select').append(data);
            });
        });
    }
</script>