<!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. 使用SqlBulkCopy将DataTable百万级数据瞬间入库

    #region 使用SqlBulkCopy将DataTable中的数据批量插入数据库中 /// <summary> /// 注意:DataTable中的列需要与数据库表中的列完全一致.// ...

  2. npm升级到最新版本、指定版本

    npm 升级到最新版本 //linux下 npm install -g npm npm升级到指定版本 //比如升级到5.6.0 npm install -g npm@5.6.0

  3. AQS原理

    1. AQS原理 1.1. 是什么 AQS全程AbstractQueuedSynchronizer抽象队列同步器,它是并发包中的基础类 ReetrantLock,ReentrantReadWriteL ...

  4. MES应用案例|新宏泰电器乘上智能制造的东风

    企业背景: 无锡新宏泰电器科技股份有限公司(下文简称:新宏泰电器)创立于1984年,公司主要生产断路器.微型电机.BMC/SMC材料.BMC/SMC模压制品及各类塑料模具的设计制造.已于2016年在沪 ...

  5. 从零开始搭建vue+element-ui后台管理系统项目到上线

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  6. 上传文本到hdfs上的一些命令

    在hadoop下创建文件夹 bin/hdfs dfs -mkdir -p /usr/hadoop/spark/ touch wc.input  写一些文本进去. 上传到hdfs上  bin/hdfs ...

  7. 搭建前端监控系统（五）Nodejs怎么搭建消息队列

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  8. spec开发思路以及理解

    一.spec说明 描述:编写SEPC采用创联公司自主开发的CIT语言,它是一种过程化的.类似数据库编码的语言.SPEC中除了关键字外提倡使用中文. 理解:可以理解为业务逻辑层.链接前台页面和后台数据库 ...

  9. 阿里巴巴Java开发手册（华山版）.pdf

    https://github.com/alibaba/p3c/blob/master/阿里巴巴Java开发手册(华山版).pdf

  10. httprunner学习3-extract提取token值参数关联(上个接口返回的token，传给下个接口请求参数)

    前言 如何将上个接口的返回token,传给下个接口当做请求参数?这是最常见的一个问题了. 解决这个问题其实很简单,我们只需取出token值,设置为一个中间变量a,下个接口传这个变量a就可以了.那么接下 ...