jquery多級(jí)樹形下拉菜單的實(shí)例代碼
效果圖:
使用方法
(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)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- jQuery實(shí)現(xiàn)簡(jiǎn)單的下拉菜單導(dǎo)航功能示例
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果
- jQuery實(shí)現(xiàn)下拉菜單的實(shí)例代碼
- bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
- jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例
- jQuery下拉菜單的實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
- jQuery實(shí)現(xiàn)下拉菜單(內(nèi)容為時(shí)間)的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法
相關(guān)文章
jQuery ready()和onload的加載耗時(shí)分析
這篇文章主要介紹了jQuery ready()和onload的加載耗時(shí),結(jié)合實(shí)例形式對(duì)比分析了jQuery中的ready()和JavaScript的window.onload進(jìn)行頁(yè)面加載的時(shí)間,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery基于事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)元素顯示與隱藏功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jquery struts 驗(yàn)證唯一標(biāo)識(shí)(公用方法)
本教程將為大家詳細(xì)介紹下使用公用方法驗(yàn)證jquery struts唯一標(biāo)識(shí),感興趣的朋友可以參考下哈,希望可以幫助到你2013-03-03jQuery學(xué)習(xí)筆記——jqGrid的使用記錄(實(shí)現(xiàn)分頁(yè)、搜索功能)
這篇文章主要介紹了jQuery學(xué)習(xí)筆記——jqGrid的使用記錄(實(shí)現(xiàn)分頁(yè)、搜索功能),想要學(xué)習(xí)jQuery的可以了解一下。2016-11-11ASP.NET jQuery 實(shí)例12 通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)頁(yè)面驗(yàn)證功能
在這節(jié)我們將使用validation插件實(shí)現(xiàn)注冊(cè)頁(yè)面的驗(yàn)證功能,通過(guò)這個(gè)例子,可以更全面的掌握該插件的使用功能2012-02-02jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類似淘寶首頁(yè)縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12