效果图：

使用方法

（1）引入 jQuery 包，下载地址

（2）引入 zTree 包，下载地址

（3）引入 tree-select.js

（4）$("#id").treeSelect(data);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TreeSelect</title>
 
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
 
<link rel="stylesheet" type="text/css" href="js/zTree_v3-master/css/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="js/zTree_v3-master/js/jquery.ztree.all.js"></script>
 
<script type="text/javascript" src="js/tree-select.js"></script>
</head>
<body>
<div>
<input id="ts_input">
</div>
</body>
</html>
 
<script type="text/javascript">
$(function () {
var data = getData();
$("#ts_input").treeSelect(data);
});
 
function getData() {
// ajax get data
var data = [
{
"name": "江苏",
"pid": 0,
"id": -1,
// "icon": "images/page.gif"
},
{
"name": "浙江",
"pid": 0,
"id": -2,
// "icon": "images/page.gif"
},
{
"name": "陕西",
"pid": 0,
"id": -3,
// "icon": "images/page.gif"
},
{
"name": "苏州",
"pid": -1,
"id": 1,
// "icon": "images/page.gif"
},
{
"name": "无锡",
"pid": -1,
"id": 2,
// "icon": "images/page.gif"
},
{
"name": "常州",
"pid": -1,
"id": 3,
// "icon": "images/page.gif"
},
{
"name": "杭州",
"pid": -2,
"id": 4,
// "icon": "images/page.gif"
},
{
"name": "宁波",
"pid": -2,
"id": 5,
// "icon": "images/page.gif"
},
{
"name": "西安",
"pid": -3,
"id": 6,
// "icon": "images/page.gif"
},
{
"name": "宝鸡",
"pid": -3,
"id": 7,
// "icon": "images/page.gif"
},
{
"name": "咸阳",
"pid": -3,
"id": -4,
// "icon": "images/page.gif"
},
{
"name": "秦都",
"pid": -4,
"id": 9,
// "icon": "images/page.gif"
},
{
"name": "杨凌",
"pid": -4,
"id": -5,
// "icon": "images/page.gif"
},
{
"name": "树木园",
"pid": -5,
"id": 1,
// "icon": "images/page.gif"
},
{
"name": "渭河",
"pid": -5,
"id": 2,
// "icon": "images/page.gif"
},
];
return data;
}
 
</script>
QQ：1960883022  改动态有什么问题可私信，注明来意
参考：https://blog.csdn.net/MAOZEXIJR/article/details/84323034

jquery多级树形下拉菜单的更多相关文章

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

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

  2. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  3. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  4. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  5. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  6. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

  7. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  8. jQuery cxSelect 联动下拉菜单

    插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...

  9. jquery 只有二级下拉菜单

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

随机推荐

  1. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  2. Linux：oracle11.2.0dbca静默建库

    1.关闭防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止firewall ...

  3. scrapy xpath用法

    一.实验环境 1.Windows7x64_SP1 2.anaconda3 + python3.7.3(anaconda集成,不需单独安装) 3.scrapy1.6.0 二.用法举例 1.开启scrap ...

  4. Python 面向導向語言 Object Oriented Programming Language

    Pytho 是面向對象的程式語言,舉凡 Literals 值都是 Object.例如: >>> id(38)8791423739696 與 >>> id('ABC' ...

  5. 深入理解Mysql索引底层数据结构与算法

    索引是帮助MySQL高效获取数据的排好序的数据结构 索引数据结构对比 二叉树 左边子节点的数据小于父节点数据,右边子节点的数据大于父节点数据. 如果col2是索引,查找索引为89的行元素,那么只需要查 ...

  6. 敏捷之旅--携程Scrum Master 新官上任三把火？

      随着敏捷在国内的推行,越来越多的公司和组织开始使用敏捷领导团队. 敏捷团队如雨后春笋之势涌现. 敏捷教练的团队也越来越壮大.   原先只需要一个敏捷教练就能搞定,但是随着团队越来越多,我们难免会将 ...

  7. Linux下Tomcat的搭建以及开机自启动设置

    首先进行下JDK的配置: 1.查看下系统信息,确认是32位还是64位:uname -a 2.下载相应位数的jdk压缩包,传到Linux系统,这里提供一个32位和64位的下载链接:https://pan ...

  8. Windows上IDEA搭建最新Spark2.4.3源码调试的开发环境

    相信很多同学都想通过阅读一些框架的源码,来提高自己的代码能力,但往往在第一步,搭建环境的时候就碰了壁. 本篇就来介绍下如何在Windows下,将最新版的Spark2.4.3编译,并导入到IDEA编译器 ...

  9. Mysql死锁如何排查：insert on duplicate死锁一次排查分析过程

    前言 遇到Mysql死锁问题,我们应该怎么排查分析呢?之前线上出现一个insert on duplicate死锁问题,本文将基于这个死锁问题,分享排查分析过程,希望对大家有帮助. 死锁案发还原 表结构 ...

  10. TypeError: 'in <string>' requires string as left operand, not int

    报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/2.NLP/9.DL在NLP中的应用/4. Ve ...