jquery類別子類別，子類別等

Question

我想要做一個三級層次類別，子類別和子類別與選擇標籤使用JQuery。其實，它的工作。但是，有一個錯誤。它只是第一次工作。當我選擇一個類別時，它顯示子類別。然後，當我選擇子類別時，它顯示子子類別。那很好。但是，當我更改類別而不重新加載頁面時，它會顯示重複的子類別。我不知道爲什麼，但我認爲這可能是由於不瞭解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 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); 
       } 
      }); 
     }); 
    }); 

Answer 2

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