Laravel 动态下拉菜单不为空

Question

我的目标是实现一个动态下拉菜单，该下拉菜单将根据第一个下拉菜单显示第二个下拉菜单的值。

一个服务有很多类别，一个类别属于一个服务，所以第二个下拉列表是类别，第一个下拉列表是服务。选择服务后，它将根据所选服务显示所有类别。

这是 RequestController.php

中的代码

public function create()
    {
        $client = Client::all()->sortBy('client_name', SORT_NATURAL | SORT_FLAG_CASE)->pluck('client_name', 'id');
        $services = Service::with('categories')->get()->sortBy('code', SORT_NATURAL | SORT_FLAG_CASE)->pluck('description', 'id');
        $categories = Categories::with('service')->get()->sortBy('name', SORT_NATURAL | SORT_FLAG_CASE)->pluck('name', 'id');

        return view('encoder-dashboard.analysis-request.create', compact('client', 'services', 'categories'));
    }

在我的 fields.blade.php

<!-- Service Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('service_id', 'Service:') !!}
     {!! Form::select('service_id', $services, null, ['class' => 'form-control','required'])!!}
</div>

<!-- Categories Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('category_id', 'Category:') !!}
     {!! Form::select('category_id', $categories, null, ['class' => 'form-control','required'])!!}
</div>

处理请求的脚本

<script>
        $(function() {
            $('select[name=service_id]').change(function() {

                var url = '{{ url('service') }}' + $(this).val() + '/categories/';

                $.get(url, function(data) {
                    var select = $('form select[name= category_id]');

                    select.empty();

                    $.each(data,function(key, value) {
                        select.append('<option value=' + value.id + '>' + value.name + '</option>');
                    });
                });
            });
        });
    </script>

路由web.php

Route::get('service/{service}/categories', 'ServiceController@getCategories');

而在ServiceController.php

public function getCategories($service)
{
    $service = Service::findOrFail($service);
    return $service->categories->pluck(['id','name']);
}

我实现了使用 pluck 获取所有数据。但是名称为 category_id

的类别的表单为空

所以我猜我的问题是在脚本内还是不？

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

Answer 1

试试这个，我有类似的，有一些小的差异。

<script>
    JQuery(function() {
        $('#service_id').change(function() {

            var url = '{{ url('service') }}' + $(this).val() + '/categories/';

            $.get(url, function(data) {
                var select = $('form select[name= category_id]');

                select.empty();

                $.each(data,function(key, value) {
                    select.append('<option value=' + key + '>' + value + '</option>');
                });
            });
        });
    });
</script>

反转 id 和 name。首先选择值，键是可选的（您的 id）。另见Laravel Collections pluck 编辑： pluck 不包含数组。

 public function getCategories($service)
{
    $service = Service::findOrFail($service);
    return $service->categories->pluck('name', 'id');
}

Answer 2

，我不完全确定问题出在哪里，但听起来它正在正确清除选择中的数据，但没有将其放回原处？

附加到更改的元素可能是一个问题，或者没有正确找到选择器，或者它可能不是动态的并且在更改on.('change') vs .change()...（或几件事）后失去了它的钩子。

这是我用来重新填充的函数。我在循环中添加 html，然后使用钩子将整个选择一次更改为 $(this)，然后触发更改。

也许这对你有帮助：

// After filtering (any select box across the program), repopulate it -- same function for anything
function ajaxFilterSuccess(typeClass, newArray){
$('.'+typeClass).each(function(i, obj) {

    // Only add Please Select to single selects (not multiple / select2) since multis are usually
    // many to many pivots without a way to mutate the input away from '' (needs to be null or stopped totally)
    if(typeof this.attributes['multiple'] == 'undefined')
        var list = '<option value="">Please Select</option>';

    if ($(this).val() != null) {
        $(this).children(':selected').each(function() {
            // Use native JS to get 'this', so it doesn't confuse with the $(this) selector looping
            list += '<option value="'+this.value+'" selected>'+this.text+'</option>';
        });
    }

    $(this).empty();

    $.each(newArray, function(value,key) {
        list += "<option value='" +value + "'>" + key + "</option>";
    });

    $(this).html(list);
    $(this).trigger('change');
});
}