<!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. sql server union与unionALL区别

    两种用法 一样, 查询字段类型需要一致 union 会自动去重 union all  不会去重 select name ,age from student union select name ,age ...

  2. 解决WPF下popup不随着window一起移动的问题

    /// <summary> /// Popup帮助类,解决Popup设置StayOpen="True"时,移动窗体或者改变窗体大小时,Popup不随窗体移动的问题 // ...

  3. 百度webuploader如何实现秒传与断点续传

    因为这是小众需求,所以默认没有做在webuploader里面,而只是提供hook接口,让用户很简单的扩展此功能. 那么,都有哪些重要的hook接口呢? before-send-file 此hook在文 ...

  4. 解决Spring Boot 从1.x升级到 2.x 后 单点登陆(SSO)问题

    解决Spring Boot 从1.x升级到 2.x 后 单点登陆(SSO)问题   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring S ...

  5. python爬虫---爬虫的数据解析的流程和解析数据的几种方式

    python爬虫---爬虫的数据解析的流程和解析数据的几种方式 一丶爬虫数据解析 概念:将一整张页面中的局部数据进行提取/解析 作用:用来实现聚焦爬虫的吧 实现方式: 正则 (针对字符串) bs4 x ...

  6. ios、安卓前端兼容性

    1.日期兼容性 解决方法(请看我上一篇文章)安卓.ios时间转换成时间戳的形式 2.input框聚焦,ios出现outline或者阴影,安卓显示正常 解决方法 input:focus{outline: ...

  7. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  8. 机器学习10种经典算法的Python实现

    广义来说,有三种机器学习算法 1. 监督式学习 工作机制:这个算法由一个目标变量或结果变量(或因变量)组成.这些变量由已知的一系列预示变量(自变量)预测而来.利用这一系列变量,我们生成一个将输入值映射 ...

  9. 浅谈Python设计模式 - 原型模式

    声明,本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 在<精通Python设计模式>中把设计模式分为三种类型: 创建型模式 ...

  10. Linux——Pxe+Nfs+Kickstart自动部署安装Centos7.4

    PXE简介 PXE,全名Pre-boot Execution Environment,预启动执行环境:通过网络接口启动计算机,不依赖本地存储设备(如硬盘)或本地已安装的操作系统:由Intel和Syst ...