本文简单实现jquery无限级联效果。 主要包含3个文件：index.html（主页），wuxianjilian.php（数据处理），wuxianjilian.sql（mysql数据文件） 1. index.html 1 html 2 head 3 title 无限级联 / title 4 meta http-equiv =content-type content =text/htm
本文简单实现jquery无限级联效果。
主要包含3个文件：index.html（主页），wuxianjilian.php（数据处理），wuxianjilian.sql（mysql数据文件）
1. index.html
1 html> 2 head> 3 title>无限级联title> 4 meta http-equiv=content-type content=text/html; charset=utf-8 /> 5 meta http-equiv=content-language content=zh-cn /> 6 script type=text/javascript src=http://files.cnblogs.com/zjmainstay/jquery-1.6.2.min.js>script> 7 head> 8 body> 9 div id=jiliancontainer>div>10 script type=text/javascript>11 $(document).ready(function(){12 var getdata = function(obj){13 $.ajax({14 url:'wuxianjilian.php',15 type:'post',16 data:{pid:obj.val()},17 datatype:'json',18 async:false,19 success:function(data){20 if($(.selection).length){21 $(.selection:gt(+$(obj).index()+)).remove(); //移除后面所有子级下拉菜单22 $(.selection:last).after(data); //添加子级下拉菜单23 }else {24 $(#jiliancontainer).append(data); //初始加载情况25 }26 //所有下拉响应27 $(.selection).unbind().change(function(){28 getdata($(this));29 });30 },31 error:function(msg){32 alert('error');33 }34 });35 }36 37 //init38 getdata($(this));39 40 });41 script>42 43 44 45 div style=height:100px;display:block;>div>46 input type=button value=存储数据 id=save>input>47 script type=text/javascript>48 $(document).ready(function(){49 $(#save).click(function(){50 var data = [];51 $(.selection).each(function(){52 data.push($.trim($(this).val()));53 })54 55 alert(data.join(','));56 });57 });58 script>59 60 body>61 html>
2. wuxianjilian.php
1 php 2 header(content-type: text/html; charset=utf-8); 3 4 //数据库连接操作 5 $conn = mysql_connect(localhost,zjmainstay,) or die(can not connect to database.fatal error handle by . __file__); 6 mysql_select_db(test,$conn); //数据库名为 test 7 mysql_query(set names utf8,$conn); 8 9 //获取父级id10 $pid = (int)$_post['pid'];11 12 //查询子级13 $sql = select id,text from `wuxianjilian` where pid={$pid};14 $result = mysql_query($sql,$conn);15 16 //组装子级下拉菜单17 $html = '';18 while($row = mysql_fetch_assoc($result)){19 $html .= ''.$row['text'].'';20 }21 22 if(!empty($html)) $html = '请选择' . $html . '';23 24 //输出下拉菜单25 echo json_encode($html);26 //end_php
3. wuxianjilian.sql
1 wuxianjilian.sql 2 /* 3 navicat mysql data transfer 4 5 source server : localhost 6 source server version : 50516 7 source host : localhost:3306 8 source database : test 9 10 target server type : mysql11 target server version : 5051612 file encoding : 6500113 14 date: 2012-10-24 20:59:0915 */16 17 set foreign_key_checks=0;18 -- ----------------------------19 -- table structure for `wuxianjilian`20 -- ----------------------------21 drop table if exists `wuxianjilian`;22 create table `wuxianjilian` (23 `id` int(11) not null auto_increment,24 `pid` int(11) default null,25 `text` varchar(32) default null,26 primary key (`id`)27 ) engine=innodb auto_increment=22 default charset=utf8;28 29 -- ----------------------------30 -- records of wuxianjilian31 -- ----------------------------32 insert into `wuxianjilian` values ('1', '0', 'a0');33 insert into `wuxianjilian` values ('2', '0', 'b0');34 insert into `wuxianjilian` values ('3', '1', 'c1');35 insert into `wuxianjilian` values ('4', '1', 'd1');36 insert into `wuxianjilian` values ('5', '1', 'e1');37 insert into `wuxianjilian` values ('6', '2', 'f2');38 insert into `wuxianjilian` values ('7', '2', 'g2');39 insert into `wuxianjilian` values ('8', '3', 'h3');40 insert into `wuxianjilian` values ('9', '3', 'i3');41 insert into `wuxianjilian` values ('10', '3', 'j3');42 insert into `wuxianjilian` values ('11', '3', 'k3');43 insert into `wuxianjilian` values ('12', '4', 'l4');44 insert into `wuxianjilian` values ('13', '4', 'm4');45 insert into `wuxianjilian` values ('14', '8', 'n8');46 insert into `wuxianjilian` values ('15', '9', 'n9');47 insert into `wuxianjilian` values ('16', '14', 'o14');48 insert into `wuxianjilian` values ('17', '14', 'p14');49 insert into `wuxianjilian` values ('18', '14', 'q14');50 insert into `wuxianjilian` values ('19', '17', 'r17');51 insert into `wuxianjilian` values ('20', '17', 's18');52 insert into `wuxianjilian` values ('21', '20', 't20');
1 /* 2 navicat mysql data transfer 3 4 source server : localhost 5 source server version : 50516 6 source host : localhost:3306 7 source database : test 8 9 target server type : mysql10 target server version : 5051611 file encoding : 6500112 13 date: 2012-10-24 20:59:0914 */15 16 set foreign_key_checks=0;17 -- ----------------------------18 -- table structure for `wuxianjilian`19 -- ----------------------------20 drop table if exists `wuxianjilian`;21 create table `wuxianjilian` (22 `id` int(11) not null auto_increment,23 `pid` int(11) default null,24 `text` varchar(32) default null,25 primary key (`id`)26 ) engine=innodb auto_increment=22 default charset=utf8;27 28 -- ----------------------------29 -- records of wuxianjilian30 -- ----------------------------31 insert into `wuxianjilian` values ('1', '0', 'a0');32 insert into `wuxianjilian` values ('2', '0', 'b0');33 insert into `wuxianjilian` values ('3', '1', 'c1');34 insert into `wuxianjilian` values ('4', '1', 'd1');35 insert into `wuxianjilian` values ('5', '1', 'e1');36 insert into `wuxianjilian` values ('6', '2', 'f2');37 insert into `wuxianjilian` values ('7', '2', 'g2');38 insert into `wuxianjilian` values ('8', '3', 'h3');39 insert into `wuxianjilian` values ('9', '3', 'i3');40 insert into `wuxianjilian` values ('10', '3', 'j3');41 insert into `wuxianjilian` values ('11', '3', 'k3');42 insert into `wuxianjilian` values ('12', '4', 'l4');43 insert into `wuxianjilian` values ('13', '4', 'm4');44 insert into `wuxianjilian` values ('14', '8', 'n8');45 insert into `wuxianjilian` values ('15', '9', 'n9');46 insert into `wuxianjilian` values ('16', '14', 'o14');47 insert into `wuxianjilian` values ('17', '14', 'p14');48 insert into `wuxianjilian` values ('18', '14', 'q14');49 insert into `wuxianjilian` values ('19', '17', 'r17');50 insert into `wuxianjilian` values ('20', '17', 's18');51 insert into `wuxianjilian` values ('21', '20', 't20');
效果图：
图（1） 仅下拉框
图（2）层级提示+下拉框
图（3）存储数据点击响应
简单贴几张图，不过还是亲自测试效果好点，请点击演示地址测试。
演示地址：无限级联仅下拉选项框版本
下载地址：jquery+php+mysql简单无限级联实现源码