jquery多級樹形下拉菜單

時間 2019-12-10

標籤 jquery 多級下拉菜單欄目 JQuery 简体版

原文原文鏈接

效果圖：

使用方法javascript

（1）引入 jQuery 包，下載地址css

（2）引入 zTree 包，下載地址html

（3）引入 tree-select.jsjava

（4）$("#id").treeSelect(data); jquery

<!DOCTYPE html>

<head>

<title>TreeSelect</title>

</head>

<body>

<div>

</div>

</body>

</html>

$(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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。