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实现图片平滑滚动详解
Mar 22 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现全选按钮
Jan 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
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php时间函数用法分析
2016/05/28 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
介绍一下gcc特性
2015/10/31 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
写自荐信的注意事项
2014/03/09 职场文书
企业口号大全
2014/06/12 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
保送生自荐信
2015/03/06 职场文书
企业培训简报范文
2015/07/20 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书