Bootstrap实现下拉菜单多级联动

本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码，供大家参考，具体内容如下

rush:xhtml;"> <Meta charset="UTF-8"> Bootstrap 3 的多级下拉<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>示例

<input type="hidden" name="category_id" id="category_id" value="" /> 
<div class="dropdown"&gt; 
 <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span id="select-title"&gt;选择分类</span> <span class="caret"&gt;</span></a> 
 <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"&gt; 
  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="1" data-title="一级菜单"&gt;一级菜单</a></li> 
  <li class="dropdown-submenu"&gt; 
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="2" data-title="一级菜单"&gt;一级菜单</a> 
   <ul class="dropdown-menu"&gt; 
    <li><a data-index="2-1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="二级菜单"&gt;二级菜单</a></li> 
   </ul> 
  </li> 

  <li class="dropdown-submenu"&gt; 
   <a tabindex="3" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="一级菜单"&gt;一级菜单</a> 
   <ul class="dropdown-menu"&gt; 
    <li><a tabindex="3-1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="二级菜单"&gt;二级菜单</a></li> 
    <li class="divider"&gt;</li> 
    <li class="dropdown-submenu"&gt; 
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="3-2" data-title="二级菜单"&gt;二级菜单</a> 
     <ul class="dropdown-menu"&gt; 
      <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="3-2-1" data-title="三级菜单"&gt;三级菜单</a></li> 
     </ul> 
    </li> 
   </ul> 
  </li> 
 </ul> 
</div>

console.log(this);
title = $(this).attr("data-title");
id = $(this).attr("data-index");
$("#select-title").text(title);
$("#category_id").val(id);
})

Bootstrap实现下拉菜单多级联动

相关推荐