脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery多级树形下拉菜单

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实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    这篇文章主要介绍了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果,涉及jQuery响应鼠标事件操作页面元素动画效果的实现技巧,需要的朋友可以参考下
    2015-09-09
  • jQuery鼠标滑过横向时间轴样式(代码详解)

    jQuery鼠标滑过横向时间轴样式(代码详解)

    这篇文章主要介绍了jQuery鼠标滑过横向时间轴样式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • jQuery EasyUI Panel面板组件使用详解

    jQuery EasyUI Panel面板组件使用详解

    这篇文章主要为大家详细介绍了jQuery EasyUI Panel面板组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 详解jQuery简单的表单应用

    详解jQuery简单的表单应用

    本文主要对单行文本框、多行文本框应用、复选框应用、下拉框应用、表单应用进行实例分析介绍。具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • jQuery实现的网站banner图片无缝轮播效果完整实例

    jQuery实现的网站banner图片无缝轮播效果完整实例

    这篇文章主要介绍了jQuery实现的网站banner图片无缝轮播效果,结合完整实例形式分析了jQuery结合时间函数实现图片定时轮播切换相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Jquery 组合form元素为json格式,asp.net反序列化

    Jquery 组合form元素为json格式,asp.net反序列化

    Jquery组合form元素为json格式,asp.net反序列化实现代码，大家可以具体的看下面的说明。
    2009-07-07
  • jQuery表单验证之密码确认

    jQuery表单验证之密码确认

    这篇文章主要为大家详细介绍了jQuery表单验证之密码确认的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jquery ajax提交表单数据的两种实现方法

    jquery ajax提交表单数据的两种实现方法

    貌似AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要“随波逐流”一把，不然饭碗不保啊！
    2010-04-04
  • jQuery实现带滚动导航效果的全屏滚动相册实例

    jQuery实现带滚动导航效果的全屏滚动相册实例

    这篇文章主要介绍了jQuery实现带滚动导航效果的全屏滚动相册,涉及jQuery针对页面图片元素与鼠标事件的相关操作技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery 3.0 的变化及使用方法

    jQuery 3.0 的变化及使用方法

    jQuery ，是迄今为止世界上最流行的 JavaScript 库，一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今，已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松
    2016-02-02

最新评论