Question

在视图中，我有几个选择菜单，这些菜单由来自两个单独表的数据填充。

寻找一种方法来填充第二个选择菜单，具体取决于第一个选择菜单的值。

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

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

Answer 1

执行此操作的方法是使用javascript。主要思想是使用第二个选择部分视图，然后在用户更改第一个选择中的内容时调用它。为此，您需要有两个视图。主视图将使用默认的部门集合调用第二个视图：

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

第二个视图（contents.partial）将打印表单：

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

然后你需要一个调用函数的路径来根据某个值渲染第二个视图：

Route::get('/get/content/{value}', 'ContentController@getContent');

在ContentController中呈现视图的函数：

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

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

要调用它，你需要一个javascript / jquery来识别select中的变化并激活控制器中的函数

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

这是主要想法，好吗？

Laravel5中动态填充的选择菜单

1 个答案: