Laravel通过AJAX填充多个选择框

Question

我有一个搜索表单，其中有三个选择框department，role和location。我最初使用View Composer来获取每个选择的选项

表单的视图编辑器

// Search view composer
view()->composer(['layouts.quick-search', 'layouts.quick-search-full-width'], function ($view) {
    $view->with('departments', \App\User::distinct('department')
    ->orderBy('department')
    ->pluck('department'));

    $view->with('roles', \App\User::distinct('role')
    ->orderBy('role')
    ->pluck('role'));

    $view->with('locations', \App\User::distinct('location')
    ->orderBy('location')
    ->pluck('location'));
});

这是表单标记

<div class="form-box dark_blue">

    <div class="row">
        <div class="col-xs-12">
            <div class="header">
                <div class="heading">
                    <h2>Quick search a contact</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="form-container">

        <form method="get" action="{{ action('SearchController@quickSearch') }}">

            <div class="row">

                <div class="form-group col-md-3">
                    <label for="department">Department</label>

                    <select class="form-control transparant" id="department" name="department" title="Department">
                        <option value="">Select</option>
                        @foreach($departments as $department)
                        <option value="{{ $department }}">{{ $department }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label for="role">Role</label>

                    <select class="form-control transparant" id="role" name="role" title="Role">
                        <option value="">Select</option>
                        @foreach($roles as $role)
                        <option value="{{ $role }}">{{ $role }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label for="location">Location</label>

                    <select class="form-control transparant" id="location" name="location" title="Location">
                        <option value="">Select</option>
                        @foreach($locations as $location)
                        <option value="{{ $location }}">{{ $location }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <button type="submit" id="find-contact" name="find-contact" class="btn btn-filled-blue btn-block">Find contact</button>
                </div>

            </div>
        </form>

    </div>

</div>

如您所见，表单由View Composer发送的值填充。

此时我认为如果每个选择框都按您选择的内容进行过滤，那就太棒了。

首先，我在SearchController中创建了一个方法来获取正确的数据并将其存储为数组。

/**
 * Search for related roles and locations
 */
public function searchByDepartment(Request $request)
{
    $department = $request->get('department');

    $roles = User::distinct('role')
    ->where('department', $department)
    ->orderBy('role')
    ->pluck('role');

    $locations = User::distinct('location')
    ->where('department', $department)
    ->orderBy('location')
    ->pluck('location');

    $results = array(
        'roles' => $roles,
        'locations' => $locations,
    );

    return $results;
}

这个方法基本上说：让用户选择的部门，并根据这个部门找到角色和位置。

我打算为每个选项设置一个方法，例如searchByDepartment，searchByRole和searchByLocation，以便我可以获取其他两个选择框的数据。

我正在使用AJAX进行更新，代码看起来像这样。

// Quick search filtering
$("select[name='department']").change(function () {
    if ($(this).val() != '') {
        var department = $(this).val();

        $.ajax({

            url: "/search/department",
            method: 'GET',
            data: {
                department: department
            },
            error: function (xhr, status, error) {
                var err = JSON.parse(xhr.responseText);
                alert(error);
            },
            success: function (data) {

                var roleOptions = '';
                var locationOptions = '';

                roleOptions += '<option value="">Select</option>';
                locationOptions += '<option value="">Select</option>';

                $.each(data, function (index, value) {

                    roleOptions += '<option value="' + value + '">' + value + '</option>';
                    locationOptions += '<option value="' + value + '">' + value + '</option>';
                });

                $("select[name='role']").html(roleOptions);
                $("select[name='location']").html(locationOptions);
            }

        });
    }
});

同样，我需要为每个change事件提供三种不同的方法。

有没有更好的方法做到这一点并没有涉及如此多的重复或者这没关系？

我觉得这并不能很好地遵守DRY校长。