jquery多級(jí)樹形下拉菜單的實(shí)例代碼

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:53:54

jquery多級(jí)樹形下拉菜單的實(shí)例代碼

jquery多級(jí)樹形下拉菜單的實(shí)例代碼:效果圖：使用方法（1）引入 jQuery 包，下載地址（2）引入 zTree 包，下載地址（3）引入 tree-select.js （4）$(#id).treeSelect(data); <!DOCTYPE html> <html lang=en> <head> <

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jquery多級(jí)樹形下拉菜單的實(shí)例代碼:效果圖：使用方法（1）引入 jQuery 包，下載地址（2）引入 zTree 包，下載地址（3）引入 tree-select.js （4）$(#id).treeSelect(data); <!DOCTYPE html> <html lang=en> <head> <

效果圖：

使用方法

（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": "無(wú)錫",
"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": "咸陽(yáng)",
"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>

總結(jié)

以上所述是小編給大家介紹的jquery多級(jí)樹形下拉菜單的實(shí)例代碼 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquery多級(jí)樹形下拉菜單的實(shí)例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：下拉菜單代碼下拉列表

熱門焦點(diǎn)

jquery多級(jí)樹形下拉菜單的實(shí)例代碼

jquery多級(jí)樹形下拉菜單的實(shí)例代碼

jquery多級(jí)樹形下拉菜單的實(shí)例代碼

最新推薦

猜你喜歡

熱門推薦