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+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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数据库调用类调用实例(详细注释)
2012/07/12 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
iview table高度动态设置方法
2018/03/14 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
python去除所有html标签的方法
2015/05/05 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python中的变量如何开辟内存
2018/06/26 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
详解Python3 基本数据类型
2019/04/19 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
建筑工地大门标语
2014/06/18 职场文书
群众路线领导对照材料
2014/08/23 职场文书
民族精神月活动总结
2014/08/28 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
暑期实践个人总结
2015/03/06 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2016教师节问候语
2015/11/10 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript