Как отобразить подкатегорию в зависимости от выбранной категории

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 (я имею в виду подкатегории). Я заметил, что есть div с классом dropdown-menu open и внутри него есть тег ul с классом dropdown-menu inner. И, наконец, внутри этого тега ul есть теги li. По этой причине он не изменится с представления тега select. И вот эти li теги отображают все подкатегории и не фильтруют их. Эти теги li отвечают за отображение элементов внутри тега select. Я застрял здесь, и я не знаю, как их фильтровать. Теги li имеют теги span с именем класса text.

Так как я могу отфильтровать их?

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>

Тем не менее, я не тестировал приведенный выше код, поэтому вы могли ожидать некоторые ошибки. Но вы должны быть в состоянии улучшить его, чтобы удовлетворить ваши потребности. Гудлак.