Question

我想使用JQuery做一个带有select标签的三级分层类别，子类别和子子类别。实际上，它的工作原理。但是，有一个错误。它只适用于第一次。当我选择一个类别时，它会显示子类别。然后，当我选择子类别时，它显示子子类别。非常好。但是，当我在不重新加载页面的情况下更改类别时，它会显示重复的子类别。我不知道为什么，但我认为这可能是由于不了解JQuery live函数。这是代码。有一些树枝标签（来自Symfony 2）使用。

请帮助。

$(document).ready(function() {
        var options = '<select><option value="0">--Select--</option>';
        {% for catalog in catalogs %}
            options += '<option value="{{ catalog.id }}">{{ catalog.name }}</option>';
        {% endfor %}
        options += '</select>';
        $('#form_item_add').html(options);

        $('#form_item_add select').change(function() {
            $(this).nextAll($(this)).remove();
            $.getJSON('{{ path('subcatalog_list') }}', {catalog: $(this).val()}, function(json) {
                if (json.length !== 0)
                {
                    options = '<select><option value="0">--Select--</option>';
                    for (var i = 0; i < json.length; i++)
                    {
                        options += '<option value="' + json[i].c_id + '">' + json[i].c_name + '</option>';
                    }
                    options += '</select>';
                    $('#form_item_add').append(options);

                    $('#form_item_add select').live('change', function() {
                        $(this).nextAll($(this)).remove();
                        $.getJSON('{{ path('subcatalog_list') }}', {catalog: $(this).val()}, function(json) {
                            if (json.length !== 0)
                            {
                                options = '<select><option value="0">--Select--</option>';
                                for (var i = 0; i < json.length; i++)
                                {
                                    options += '<option value="' + json[i].c_id + '">' + json[i].c_name + '</option>';
                                }
                                options += '</select>';
                                $('#form_item_add').append(options);

                            }
                        });
                    });
                }
            });
        });
    });

我的控制器（Symfony 2）

/**
 * @Route("/subcatalogs", name = "subcatalog_list")
 */
public function getSubcatalogAction(Request $request)
{
    if ($request->isXmlHttpRequest())
    {
        $repository = $this->getDoctrine()->getRepository('TradeTradeBundle:Catalog');
        $query = $repository->createQueryBuilder('c')
            ->where('c.parent = :parent')
            ->setParameter('parent', $request->get('catalog'))
            ->getQuery();
        $subcatalogs = $query->getScalarResult();

        return new Response(json_encode($subcatalogs));
    }

    return $this->render('TwigBundle:Exception:error.html.twig', array('status_code' => 404, 'status_text' => 'Page not found'));
}

Answer 1

 $(document).ready(function () {
            var ddlCategory = '<select id="ddlCategory"><option value="0">--Select--</option>';
            {% for catalog in catalogs %}
            ddlCategory += '<option value="{{ catalog.id }}">{{ catalog.name }}</option>';
            {% endfor %}
            ddlCategory += '</select>';
            $('#form_item_add').html(options);

            $('#form_item_add').find('select.ddlCategory').on('change', function () {
                $(this).nextAll('select').remove();

                if ($(this).val() !== '0') {
                    $.getJSON('{{ path(' + subcatalog_list + ') }}', { catalog: $(this).val() }, function (json) {
                        if (json.length !== 0) {
                            var ddlSubcategory = $('<select id="ddlSubcategory"><option value="0">--Select--</option></select>');
                            $.each(json, function (i, entity) {
                                ddlSubcategory.append($('<option />', { 'value': entity.c_id, 'text': entity.c_name }));
                            });

                            $('#form_item_add').append(ddlSubcategory);

                            $('#form_item_add').find('select.ddlCategory').trigger('change');
                        }
                    });
                }
            });

            $('#form_item_add select.ddlSubcategory').on('change', function () {
                $(this).nextAll('select').remove();

                if ($(this).val() !== '0') {
                    $.getJSON('{{ path(' + subcatalog_list + ') }}', { catalog: $(this).val() }, function (json) {
                        if (json.length !== 0) {
                            var ddlSubcategoryList = '<select id="ddlSubcategoryList"></select>';

                            $.each(json, function (i, entity) {
                                ddlSubcategoryList.append($('<option />', { 'value': entity.c_id, 'text': entity.c_name }));
                            });

                            $('#form_item_add').append(ddlSubcategoryList);

                            $('#form_item_add').find('select.ddlSubcategoryList').trigger('change');
                        }
                    });
                }
            });
        });

Answer 2

我自己解决了这个问题：

$(document).ready(function() {
        var options = '<select><option value="0">--Select--</option>';
        {% for catalog in catalogs %}
            options += '<option value="{{ catalog.id }}">{{ catalog.name }}</option>';
        {% endfor %}
        options += '</select>';
        $('#form_item_add').html(options);

        $('#form_item_add select').live('change', function() {
            $(this).nextAll($(this)).remove();
            $.getJSON('{{ path('subcatalog_list') }}', {catalog: $(this).val()}, function(json) {
                if (json.length !== 0)
                {
                    options = '<select><option value="0">--Select--</option>';
                    for (var i = 0; i < json.length; i++)
                    {
                        options += '<option value="' + json[i].c_id + '">' + json[i].c_name + '</option>';
                    }
                    options += '</select>';
                    $('#form_item_add').append(options);
                }
            });
        });
    });

jquery类别子类别，子类别等

2 个答案: