<!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. 树莓派安装使用docker

    2019/11/11, 树莓派4B, Raspbian Buster,Docker 19.03.4 摘要:树莓派Raspbian Buster中安装Docker,Dockerfile更改软件源 安装d ...

  2. Java自学-数字与字符串 操纵字符串

    Java常见字符串方法 示例 1 : 获取字符 charAt(int index)获取指定位置的字符 package character; public class TestString { publ ...

  3. SpringCloud SpringBoot 前后端分离企业级微服务架构源码赠送

    基于SpringBoot2.x.SpringCloud和SpringCloudAlibaba并采用前后端分离的企业级微服务敏捷开发系统架构.并引入组件化的思想实现高内聚低耦合,项目代码简洁注释丰富上手 ...

  4. selenium.获取浏览器大小、设置浏览器位置、最大化浏览器

    此篇博客学习控制浏览器的api,分别有: get_window_size() 获取浏览器大小 set_window_size() 设置浏览器位置 get_window_position() 获取浏览器 ...

  5. Tuple VS ValueTuple

    深入理解 c# 元组与值元组(Tuple,ValueTuple) 为什么有此文章 首先要说的是我们公司内部技术框架是用 abp.vnext 框架整合而来的,我们架构师对于 abp 相关的知识都很了然于 ...

  6. RabbitMQ基本概念（一）-RabbitMQ的优劣势及产生背景

    本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...

  7. MySQL Config--参数innodb_flush_method

    延迟写 传统的UNIX实现在内核中设有缓冲区高速缓存或页面高速缓存,大多数磁盘I/O都通过缓冲进行.当将数据写入文件时,内核通常先将该数据复制到其中一个缓冲区中,如果该缓冲区尚未写满,则并不将其排入输 ...

  8. 【MySql】Update批量更新与批量更新多条记录的不同值实现方法

    mysql更新语句很简单,更新一条数据的某个字段,一般这样写: UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_valu ...

  9. 捕获Ctrl + C中断 优雅的退出程序 golang

    捕获Ctrl + C中断 优雅的退出程序 Gracefully terminate a program in Go os/signal 来捕获系统中断等信号 // Notify方法将signal发送到 ...

  10. js定时器的应用

    定时器分为两种 一种是一次性的,时间到就执行 var timer=setTimeout(fun,毫秒数); 清除的方法 clearTimeout(timer) 第二种是周期性的,根据设定的时间周期进行 ...