Wie fügen Sie die Ajax-Erfolgsdaten im Dropdown-Menü

Question

Ich möchte die Kategorien, Unterkategorien, Second-Level-Kategorien dynamisch machen. Ich habe die Hauptkategorien erstellt, die mit dem Controller angezeigt werden.

Und Unterkategorien, möchte ich in der Menüleiste anhängen. Ich habe die Unterkategorien in der Konsole angezeigt. Aber um die Daten an das Div anzuhängen, habe ich Probleme.

Dies ist mein Code:

<section class="bc-category"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="bc-category-menu"> 
      <div class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <i class="fa fa-list-ul" aria-hidden="true"></i>All Category <span class="glyphicon glyphicon-triangle-bottom"></span></a> 
      <ul class="dropdown-menu multi-level"> 
      @foreach($main_categories as $main_category) 
       <li id="{{$main_category}}" class="dropdown-submenu main_category"> <a class="maincategory" tabindex="-1" href="#">{{$main_category}}</a> 
       <ul class="dropdown-menu"> 
        <li class="dropdown-submenu"><a id="subcat" tabindex="-1" href="#"></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">All</a></li> 
         <li><a href="#">Boot Cut</a></li> 
         <li><a href="#">Capri</a></li> 
         <li><a href="#">Straight Leg</a></li> 
         <li><a href="#">Skinny</a></li> 
         <li><a href="#">Ankle/Cropped</a></li> 
         <li><a href="#">Boyfriend</a></li> 
         <li><a href="#">Overalls</a></li> 
         <li><a href="#">Wide Leg/Flare</a></li> 
         <li><a href="#">Relaxed</a></li> 
         <li><a href="#">Mid-rise</a></li> 
         <li><a href="#">Low-rise</a></li> 
         <li><a href="#">Hi-rise</a></li> 
         <li><a href="#">Easy Boot</a></li> 
        </ul> 
        </li> 
       </ul> 
       </li> 
       @endforeach 
      </ul> 
      </div> 
      <div class="bc-input-search"> 
      <input type="text" class="form-control SearchBar" placeholder="Search for Products, Brands"> 
      <span class="input-group-btn"> 
      <button class="btn btn-defaul SearchButton" type="button"> <span class=" glyphicon glyphicon-search SearchIcon" ></span> </button> 
      </span> </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$('.main_category').mouseover(function(){ 
    var name = $(this).attr('id'); 
    $.ajax({ 
     type: 'GET', 
     url : '/subcategoryfetch', 
     data: {"name": name}, 
     success: function(data) { 
      console.log(data); 
      $('#subcat').append(data); 
     }, 
    }); 
}); 
</script> 

ich diese folgende Funktion: Jetzt arbeitet es. Aber nur für das erste Menü funktioniert es.

$('.main_category').mouseover(function(){ 
    var name = $(this).attr('id'); 
    $.ajax({ 
     type: 'GET', 
     url : '/subcategoryfetch', 
     data: {"name": name}, 
     success: function(data) { 
      console.log(data); 
      // $('#subcat').append(data); 
      $.each(data, function(key, value) { 
      $('#subcat') 
       .append($('<a tabindex="-1" href="#"></a>') 
       .attr("value",key) 
       .text(value)); 
      }); 
     }, 
    }); 
}); 

Answer 1

Ihre ID Subcat wird in Schleife wiederholt. es sollte einzigartig sein. auch während append Ihren Code

$(this).find('#your unique id').append() 

ändern Ändern Sie bitte Ihre um einen Tag

<a id="subcat{{$main_category}}"> 

und aktualisieren Sie Ihre jQuery-Code

var name = $(this).attr('id'); 
$(this).find('#subcat'+name).html(''); 
var that = this; 
$.ajax({ 
    type: 'GET', 
    url : '/subcategoryfetch', 
    data: {"name": name}, 
    success: function(data) { 
     console.log(data); 
     // $('#subcat').append(data); 
     $.each(data, function(key, value) { 
     $(that).find('#subcat'+name) 
      .append($('<a tabindex="-1" href="#"></a>') 
      .attr("value",key) 
      .text(value)); 
     }); 
    }, 
});