欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery多级树形下拉菜单

程序员文章站 2022-07-08 20:22:27
效果图： 效果图： 使用方法 （1）引入 jQuery 包，下载地址 （2）引入 zTree 包，下载地址 （3）引入 tree-select.js （4）$("#id").treeSelect(data); 使用方法 （1）引入 jQuery 包，下载地址 （2）引入 zTree 包，下载地址 （ ......
效果图：
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"/>
<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>
参考：https://blog.csdn.net/maozexijr/article/details/84323034

 

上一篇： oracle分区表原理学习

下一篇： mysql 支持的数据类型

推荐阅读