Question

我有一个laravel项目，并且我正在使用foreach循环来显示类别和子类别。我已经实现了代码，这里是：

<select id="category" class="form-control">
    @foreach($category as $categories)
        <option value="{{$categories->id}}">{{$categories->name}}</option>
    @endforeach
</select>



<select name="subcategory" id="subcategory" class="form-control">
    @foreach($category as $categories)
        <optgroup label="{{$categories->id}}">
            @foreach($categories->subcategories as $subcategories)
                <option value="{{$subcategories->id}}">{{$subcategories->name}}</option>
            @endforeach
        </optgroup>
    @endforeach
</select>

这是我的JQuery：

<script>
    $(document).ready(function(){
        var $optgroups = $('#subcategory > optgroup');

        $("#category").on("change",function(){
            var selectedVal = this.value;

            $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]'));
            // $('#subcategory .dropdown-header li').html($optgroups.filter('[label="'+selectedVal+'"]'));
        });
    });
</script>

事情是可行的。在检查元素中它起作用。但是它在下拉select标记（我指的是子类别）的内部不变。我注意到的是，有一个类为dropdown-menu open的div，它的内部是一个类为ul的{{1}}标记。最后，在dropdown-menu inner标签内，有ul标签。这就是为什么它不会从li标签视图更改的原因。因此，这些select标签显示所有子类别，并且不对其进行过滤。这些li标签负责显示li标签内部的项目。我被困在这里，我不知道如何过滤它们。 select标签具有类名li的{{1}}标签。

那我该如何过滤呢？

Answer 1

它不会改变，因为您的类别位于服务器端，但是您正在更改客户端中的代码，因此前端中的代码不知道哪个子类别属于哪个类别。

要解决此问题，您需要进行ajax调用以检索属于当前活动类别的子类别，因此您可以执行以下操作：

<script>
    $(document).ready(function(){
        var $optgroups = $('#subcategory > optgroup');

        $("#category").on("change",function(){
            var selectedVal = this.value;

            // Retrieve all sub-categories of the current category
            $.ajax({
                url: "api/categories/" + selectedVal,
                dataType: "json"
            }).done(function(subCategories) {
                // Your API must return the sub-categories in Json format
                $.each(subCategories, function( index, category ) {
                    $('#subcategory').append("<optgroup label=" + category.id + ">
                            <option value='" + category.id + "'>" + category.name +"</option>
                        </optgroup>");
                });


            });

        });
    });
</script>

但是，我没有测试上面的代码，因此您可能会遇到一些错误。但是您应该能够对其进行改进以适合您的需求。祝你好运。

如何根据所选类别显示子类别

1 个答案: