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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
web方式ftp
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
python if not in 多条件判断代码
2016/09/21 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
浅析Python四种数据类型
2018/09/26 Python
Python 的AES加密与解密实现
2019/07/09 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python collections模块的使用
2020/10/16 Python
农救科工作职责
2013/11/27 职场文书
物业工作计划书
2014/01/10 职场文书
考试退步检讨书
2014/01/15 职场文书
大学军训感言200字
2014/02/26 职场文书
工程部文员岗位职责
2015/02/04 职场文书
Java基础-封装和继承
2021/07/02 Java/Android