效果圖：
使用方法
（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多級樹形下拉菜單的實例代碼 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
