以jquery插件形式获取json数据实现级联

最新推荐文章于 2022-06-29 11:13:37 发布

vtangdg

最新推荐文章于 2022-06-29 11:13:37 发布

阅读量616

点赞数

分类专栏：开发记录文章标签：级联 jquery json 插件 ajax

本文链接：https://blog.csdn.net/u012263973/article/details/40345479

版权

开发记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近学了jquery，然后就写了个级联的插件来练手，特在此分享交流，新手开发，若有不足，还望指教。

思路：要实现级联，我的思路是将要展现的各级级联元素获取，然后分级遍历，append到对应级联框中。

实现：

1.首先写个html，引入jquery库文件，和自己写的插件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>级联</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cascade.js"></script>
</head>
<body>

<div id="a"></div>
</body>
</html>

2.编写插件jquery.cascade.js如下

3.方法调用

//$("#a").cascade();//可以直接调用实现级联
//也可以传参覆盖
$("#a").cascade({
   url:"address.json",
   firstName:"所属学院",
   secondName:"就读专业",
   thirdName:"所在班级",
   firstText:"请选择学院",
   secondText:"请选择专业",
   thirdText:"请选择班级"
});

4.用到的测试数据在address.json里

[
   {
       "id":"01",
       "name":"通信学院",
       "children":[{
           "id":"0111",
           "name":"通信工程",
           "children":[{
               "id":"0111101",
               "name":"0111101"
           },{
               "id":"0111102",
               "name":"0111102"
           }]
       },{
           "id":"0121",
           "name":"电子信息工程",
           "children":[{
               "id":"0121101",
               "name":"0111101"
           },{
               "id":"0121102",
               "name":"0121102"
           }]
       }]
   },{
       "id":"03",
       "name":"经济管理学院",
       "children":[{
           "id":"0311",
           "name":"信息管理与信息系统",
           "children":[{
               "id":"0311201",
               "name":"0311201"
           },{
               "id":"0311202",
               "name":"0311202"
           },{
               "id":"0311203",
               "name":"0311203"
           }]
       },{
           "id":"0381",
           "name":"工商管理",
           "children":[{
               "id":"0381201",
               "name":"0381201"
           },{
               "id":"0381202",
               "name":"0381202"
           }]
       }]
   }
]