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 和名称。首先选择值，键是可选的（您的ID）。另见Laravel Collections pluck 编辑： pluck不包含数组。

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

Answer 2

，我不完全确定问题是什么，但听起来它是正确清除select中的数据，但没有把它放回去？

可能是附加到已更改元素或未正确查找选择器的问题，或者在更改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');
});
}

Laravel动态下拉列表不为空

2 个答案: