Wie jquery dynamische onchange() verwenden, eine andere Form

Question

möchte ich zeigen ein- und ausblenden und wählen Sie Formular Basis verstecken aus früheren Form zu verwenden wählen, wenn ich diesen Code ausführen, einen Fehler zeigen, mein Browser ist Javascript wie

A script on this page may be busy, or it may have stopped responding. 
You can stop the script now, open the script in the debugger, or let the script continue. 

Script: http://localhost/project/assets/back/js/jquery.min.js:2 

Was mit meinem Code

   <?php foreach ($menu as $key => $value): ?> 
        <li> 
        <?php echo $value->page_title ?> <span class="label-page"><?php echo $value->category ?></span> 
        Set as 
        <select id="menu_main<?php echo $value->id ?>" onchange="main_menu(<?php echo $value->id ?>)"> 
         <option value="0">Main Menu</option> 
         <option value="1">Child 1</option> 
         <option value="2">Child 2</option> 
        </select> 
        <select id="child_1<?php echo $value->id ?>" style="display: none"> 
         <option>--Select Parent--</option> 
         <optgroup label="Category"> 
         <option value="1">Kategori 1</option> 
         <option value="2">Kategori 2</option> 
         </optgroup> 
         <optgroup label="Label"> 
         <option value="1">Label 1</option> 
         <option value="2">Label 2</option> 
         </optgroup> 
        </select> 
       </li>  
      <?php endforeach ?> 

hier falsch ist mein Javascript

function main_menu(id){  
     $(document).ready(function() { 
     $("#menu_main"+id).change(function() { 
      $(this).find("option:selected").each(function() { 
      if ($(this).attr("value") == "1") { 
       $("#child_1"+id).show(); 
      } 
      });   
     }).change(); 
     }); 
    } 

Danke :)

Answer 1

Sie verursachen unendliche Rekursion. Wenn Sie das Menü ändern, ruft es main_menu(id) auf. Dies fügt einen weiteren Änderungshandler mit $("#menu_main"+id).change(...) hinzu und ruft dann .change() auf demselben Element auf. Dies ruft dann erneut main_menu(id) auf, das einen weiteren Änderungshandler hinzufügt und .change() aufruft. Und so weiter und so weiter.

Entfernen Sie die onchange im HTML, und binden Sie einfach den Event-Handler in der Dokument bereit-Funktion.

Verwenden Sie die DOM-Navigationsfunktionen, um nach dem Hauptmenü zum untergeordneten Menü zu gelangen.

$(document).ready(function() { 
    $(".menu_main").change(function() { 
     if (this.value == "1") { 
      $(this).siblings(".child_menu").show(); 
     } 
    }).change(); 
}); 

Geben Sie alle menu_mainXXX wählt class="menu_main", und die Kindermenüs class="child_menu" so dass die oben Selektor funktioniert.

PHP/HTML:

  <?php foreach ($menu as $key => $value): ?> 
       <li> 
       <?php echo $value->page_title ?> <span class="label-page"><?php echo $value->category ?></span> 
       Set as 
       <select class="menu_main" id="menu_main<?php echo $value->id ?>"> 
        <option value="0">Main Menu</option> 
        <option value="1">Child 1</option> 
        <option value="2">Child 2</option> 
       </select> 
       <select class="child_menu" id="child_1<?php echo $value->id ?>" style="display: none"> 
        <option>--Select Parent--</option> 
        <optgroup label="Category"> 
        <option value="1">Kategori 1</option> 
        <option value="2">Kategori 2</option> 
        </optgroup> 
        <optgroup label="Label"> 
        <option value="1">Label 1</option> 
        <option value="2">Label 2</option> 
        </optgroup> 
       </select> 
      </li>  
     <?php endforeach ?>