0

JQueryを使用して、selectタグを使用して3レベルの階層カテゴリ、サブカテゴリ、およびサブサブカテゴリを実行したいと思います。実際には、それは動作します。しかし、バグがあります。初めて動作します。カテゴリを選択すると、サブカテゴリが表示されます。次に、サブカテゴリを選択すると、サブサブカテゴリが表示されます。それは良い。しかし、ページをリロードせずにカテゴリを変更すると、重複したサブカテゴリが表示されます。理由はわかりませんが、JQueryのライブ機能を理解していないことが原因かもしれません。これがコードです。（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'));
}
4

2 に答える 2

0 
 $(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');
                        }
                    });
                }
            });
        });
于 2012-05-12T12:39:05.727 に答える
0

私は自分でそれを解決しました：

$(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);
                }
            });
        });
    });
于 2012-05-21T17:50:09.403 に答える