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

如何在下拉菜单中附加ajax成功数据

1 个答案: