jquery多级树形下拉菜单的实例代码


Posted in jQuery onJuly 09, 2019

效果图:

jquery多级树形下拉菜单的实例代码

使用方法

(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" rel="external nofollow" />
<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>

总结

以上所述是小编给大家介绍的jquery多级树形下拉菜单的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
详解Bootstrap插件
2016/04/25 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
简单了解python的内存管理机制
2019/07/08 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Python Map 函数的使用
2020/08/28 Python
python实现经纬度采样的示例代码
2020/12/10 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
学院书画协会部门职责
2013/11/28 职场文书
学习经验交流会主持词
2014/04/01 职场文书
白莲教口号
2014/06/18 职场文书
教师节简报
2015/07/20 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers