本文简单实现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
2
3
无限级联title>4
5
6 script>
7 head>
8
9 p>
10
11 $(document).ready(function(){12 vargetData= 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 //Init
38 getData($(this));39
40 });41 script>
42
43
44
45 p>
46 input>
47
48 $(document).ready(function(){49 $("#save").click(function(){50 vardata=[];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 php2 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 //获取父级id
10 $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.sql2 /*
3 Navicat MySQL Data Transfer4
5 Source Server : localhost6 Source Server Version : 505167 Source Host : localhost:33068 Source Database : test9
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 NULLAUTO_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 wuxianjilian
31 ------------------------------
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 Transfer3
4 Source Server : localhost5 Source Server Version : 505166 Source Host : localhost:33067 Source Database : test8
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 NULLAUTO_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 wuxianjilian
30 ------------------------------
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简单无限级联实现源码