jquery多级树形下拉菜单的实例代码
更新时间：2019年07月09日 09:27:34 作者：小灰羊
这篇文章主要介绍了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 ready()和onload的加载耗时,结合实例形式对比分析了jQuery中的ready()和JavaScript的window.onload进行页面加载的时间,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery实现侧边栏隐藏与显示的方法,结合实例形式较为详细的分析了jQuery基于事件响应与页面元素属性动态操作实现元素显示与隐藏功能的相关操作技巧,需要的朋友可以参考下2018-12-12
下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery2013-10-10
如果在domready之后用js动态添加几行，那新增的几行中的这些按钮都将失去任何作用，下面与大家分享四种解决方法2014-06-06
本教程将为大家详细介绍下使用公用方法验证jquery struts唯一标识，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-03-03
这篇文章主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下2016-09-09
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）
这篇文章主要介绍了jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能），想要学习jQuery的可以了解一下。2016-11-11
这篇文章主要介绍了一看就懂：jsonp详解,本文用浅显易懂的语言组织讲解了什么是jsonp、jsonp怎么用、jsonp使用实例等内容,需要的朋友可以参考下2015-06-06
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
在这节我们将使用validation插件实现注册页面的验证功能，通过这个例子，可以更全面的掌握该插件的使用功能2012-02-02
这篇文章主要介绍了jQuery纵向导航菜单效果实现方法,可实现类似淘宝首页纵向菜单的显示效果,涉及jQuery鼠标响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下2016-12-12
最新评论