<!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. (转)二步实现 远程连接 阿里云SqlServer 2012 数据库服务器

    前言:在使用 阿里云 上的一些产品时,遇到不少坑. 安装IIS 时,遇到 因买的配置过低,虚拟内存不足,而导致 IIS 总是安装失败: 现在 在上面安装了个 Sql Sever 2012,远程老是 不 ...

  2. Ubuntu 挂载硬盘命令介绍

    版权声明:本文为博主原创文章,欢迎转载与采用. https://blog.csdn.net/HinstenyHisoka/article/details/71055656 新升级了Ubuntu 从16 ...

  3. 第一阶段：Java基础 1.JAVA开发介绍---6. Java基本数据类型

    Java 的两大数据类型: 内置数据类型(基本数据类型) 引用数据类型 本数据类型: Java语言提供了八种基本类型.六种数字类型,一种字符类型,还有一种布尔型. byte,short,int,lon ...

  4. Java自学-操作符 关系操作符

    Java的关系操作符 关系操作符:比较两个变量之间的关系 > 大于 >= 大于或等于 < 小于 <= 小于或等于 == 是否相等 != 是否不等 示例: public clas ...

  5. Boleto 银行付款

    Boleto是由多家巴西银行共同支持的一种支付方式,在巴西占据绝对主导地位,客户可以到巴西任何一家银行.ATM机.caipiao网点或使用网上银行授权银行转账. 该支付渠道有如下特点:1. 一旦付款, ...

  6. 连接池未注册org.logicalcobwebs.proxool.ProxoolException: Attempt to refer to a unregistered pool by its alias 'XXX'

    代码之前一直好好的,写了一个定时器后报错,本地测试为了立马能执行就用cron表达式* * * * * ?,为了只执行一次在最后面加上Thread.sleep(1000*3600*24)睡眠二十四小时从 ...

  7. JavaScript API 与 DOM

    一.API 1.API 的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供引用程序与开发人员基于某软件或硬件得以访问 ...

  8. HTML5 表单新增内容

    一.H5 新增控件 1.datalist 元素 datalist 标签定义选项列表,请与 input 元素配合使用该元素.可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行 ...

  9. flask建表遇到的错误：　flask,sqlalchemy.exc.OperationalError: (MySQLdb._exceptions.OperationalError) (1071, 'Specified key was too long; max key length is 767 bytes')

    error:flask,sqlalchemy.exc.OperationalError: (MySQLdb._exceptions.OperationalError) (1071, 'Specifie ...

  10. prometheus学习系列五： Prometheus配置文件

    在prometheus监控系统,prometheus的职责是采集,查询和存储和推送报警到alertmanager.本文主要介绍下prometheus的配置文件. 全局配置文件简介 默认配置文件 [ro ...