如何在下拉菜單中添加ajax成功數據

Question

我想動態地創建類別，子類別和二級類別。我使用控制器顯示主要類別。

和子類別，我想追加在菜單欄中。 我讓子類別顯示在控制檯中。但是爲了將數據附加到div上，我面臨着一些問題。

這是我的代碼：

<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> 

我用這個如下功能： 現在，它的工作。但只適用於第一個菜單，它的工作。

$('.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

你的ID子卡在循環中得到重複。它應該是獨一無二的。還同時追加修改代碼以

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

修改您的一個標籤

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

和更新您的jQuery代碼

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)); 
     }); 
    }, 
});