<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap  的多级下拉菜单示例</title>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" />

    <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <style type="text/css">

  .dropdown-submenu {

   position: relative;

  }

  .dropdown-submenu > .dropdown-menu {

   top: ;

   left: %;

   margin-top: -6px;

   margin-left: -1px;

   -webkit-border-radius:  6px 6px 6px;

   -moz-border-radius:  6px 6px;

   border-radius:  6px 6px 6px;

  }

  .dropdown-submenu:hover > .dropdown-menu {

   display: block;

  }

  .dropdown-submenu > a:after {

   display: block;

   content: " ";

   float: right;

   width: ;

   height: ;

   border-color: transparent;

   border-style: solid;

   border-width: 5px  5px 5px;

   border-left-color: #ccc;

   margin-top: 5px;

   margin-right: -10px;

  }

  .dropdown-submenu:hover > a:after {

   border-left-color: #fff;

  }

  .dropdown-submenu.pull-left {

   float: none;

  }

  .dropdown-submenu.pull-left > .dropdown-menu {

   left: -%;

   margin-left: 10px;

   -webkit-border-radius: 6px  6px 6px;

   -moz-border-radius: 6px  6px 6px;

   border-radius: 6px  6px 6px;

  }

 </style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="form-group">

            <input type="hidden" name="category_id" id="category_id" value="" />

            <div class="dropdown">

                <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">选择分类</span> <span class="caret"></span></a>

                <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">

                    <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="" data-title="一级菜单">一级菜单</a></li>

                    <li class="dropdown-submenu">

                        <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="" data-title="一级菜单">一级菜单</a>

                        <ul class="dropdown-menu">

                            <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="二级菜单">二级菜单</a></li>

                        </ul>

                    </li>

                    <li class="dropdown-submenu">

                        <a tabindex="" 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="一级菜单">一级菜单</a>

                        <ul class="dropdown-menu">

                            <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="二级菜单">二级菜单</a></li>

                            <li class="divider"></li>

                            <li class="dropdown-submenu">

                                <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="二级菜单">二级菜单</a>

                                <ul class="dropdown-menu">

                                    <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="三级菜单">三级菜单</a></li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

$('.dropdown li a').click(function(){

 console.log(this);

 title = $(this).attr("data-title");

 id = $(this).attr("data-index");

 $("#select-title").text(title);

 $("#category_id").val(id);

})

</script>

</body>

</html>

参考：

https://www.jb51.net/article/128874.htm

https://www.cnblogs.com/stubborn-donkey/p/7248618.html

bootstrap 多级联动下拉框的更多相关文章

  1. JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  2. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  3. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. SharePoint 2013 使用查阅项实现联动下拉框

    SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...

  5. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

  6. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  7. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  8. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

随机推荐

  1. 在excel实现多级联动

    最近做了一个Excel的多级联动的功能,具体是将全国所有的气象局按一二三四级单位做成四列,实现各级的联动下拉选择,这和省市县乡的各级联动的功能基本一样,下面记录下具体的操作步骤. 1.首先需要从数据库 ...

  2. asp.net core 系列之允许跨域访问-1(Enable Cross-Origin Requests:CORS)

    接上篇的允许跨域 4.CORS 策略(Policy)的选项 这里讲解Policy可以设置的选项: 设置允许的访问源 设置允许的HTTP methods 设置允许的请求头(request header) ...

  3. 动画重定向技术分析及其在Unity中的应用

    前言 笔者新的手游项目使用Unity引擎,动画部分要使用重定向技术来实现动画复用.笔者之前在大公司工作的时候对这块了解比较深入,读过Havok引擎在这部分的实现源码,并基于自己的理解,在公司自研的手游 ...

  4. vue中使用radio和checkbox

    代码 <template> <div id="app"> <input type="checkbox" v-model=" ...

  5. Java自学-操作符 逻辑操作符

    Java的逻辑运算符 逻辑运算符 示例 1 : 长路与 和 短路与 无论长路与还是短路与 两边的运算单元都是布尔值 都为真时,才为真 任意为假,就为假 区别: 长路与 两侧,都会被运算 短路与 只要第 ...

  6. python数据分析三剑客之: pandas操作

    pandas的操作 pandas的拼接操作 # pandas的拼接操作 级联 pd.concat , pd.append 合并 pd.merge , pd.join 一丶pd.concat()级联 # ...

  7. 【转载】C#通过Copy方法快速复制DataTable对象

    C#中的Datatable数据变量的操作过程中,可以通过DataTable的Copy方法快速复制当前的DataTable变量到新对象中,复制数据包含当前DataTable的结构信息如列名,同时也包含当 ...

  8. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

  9. Golang: 解析JSON数据之二

    上次我们介绍了 Go 语言中序列化和反序列化 JSON 数据的两个方法 Marshal() 和 Unmarshal(),并以示例演示了它们的用法. 我们在例子中看到,需要事先声明好对应的结构体,才能跟 ...

  10. Docker 0x03:Install Docker

    目录 Install Docker Centos yum 安装 运行docker-daemon并开机自启动 运行hello-world应用docker容器中 Ubn Install Docker do ...