How to make dynamic selects for nested set categories

Question

Hello I want to provide to user possibility to choose category with sub categories (nested set tree). Nesting of categories no limits and when user select some root category (drop down select element) id of category sending on server and from server returns all children of this category and a new select element should be created and populated with subcategories, I made it but only for category->subcategory but I want to do it universally without restrictions on nesting categories. Problem in jquery. Here is the code witch allows send category_id and get from server all children sub categories:

$('body').on('change', '.category', function(){

    var thisElem = $(this);
    $.ajax({
        type: 'POST',
        url: '/ajax/getSubRazdels',
        cache: false,
        data: {razdel_id: $(this).find('option:selected').val()},
        beforeSend: function () {

        },
        success: function (data) {
            var categories = $('#categories-and-params');
            categories.html('');
            if (data != 'no') {
                categories.html(data);
                categories.find('select').select2();
            }

        }
    });
});

After subcategories accepted I can choose on of them, but if this category also has children sub categories I'll can't retrieve it. Maybe you can advice me some ready-made solution?

Answer 1

Try it

Dynamic create drop down up to Nth-level category.

        <div id="categories-and-params">
            <select  class="category">
                <option value="1">ABC</option>
                <option value="2">BBB</option>
            </select>
        </div>
        <script>
            $('body').on('change', '.category', function() {
                var current_index = $(this).index();
                var thisElem = $(this);
                $.ajax({
                    type: 'POST',
                    url: '/ajax/getSubRazdels',
                    cache: false,
                    data: {razdel_id: $(this).find('option:selected').val()},
                    beforeSend: function() {

                    },
                    success: function(data) {
                        var categories = $('#categories-and-params');
                        if (data != 'no') {
                            var count = $("#categories-and-params").children().length;
                                $("#categories-and-params").children().slice(current_index+1).detach();
                                $("#categories-and-params").append(data);
                        }

                    }
                });
            });
        </script>