如何为嵌套集类别进行动态选择

时间:2015-12-16 07:45:02

标签: jquery ajax

您好我想为用户提供选择子类别(嵌套集树)的类别的可能性。类别的嵌套没有限制,当用户选择服务器和服务器上的类别发送的某个根类别(下拉选择元素)id时,将返回此类别的所有子项,并且应创建一个新的select元素并填充子类别,我做了它,但仅限于category->子类别,但我想普遍地做,而不限制嵌套类别。 jquery中的问题。以下是允许发送category_id并从服务器获取所有子子类别的代码:

$('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();
            }

        }
    });
});

接受子类别后我可以选择它们,但是如果这个类别也有子类别我将无法检索它。也许你可以建议我一些现成的解决方案?

1 个答案:

答案 0 :(得分:1)

试试吧

动态创建下拉到第N级别类别。

        <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>