jQuery+PHP+MySQL简单无限级联实现
本文简单实现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="https://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 //Init 38 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 //获取父级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 .= '<option value="'.$row['id'].'">'.$row['text'].'</option>'; 20 } 21 22 if(!empty($html)) $html = '<select class="selection"><option value="">请选择</option>' . $html . '</select>'; 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 : MYSQL 11 Target Server Version : 50516 12 File Encoding : 65001 13 14 Date: 2012-10-24 20:59:09 15 */ 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 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 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 : MYSQL 10 Target Server Version : 50516 11 File Encoding : 65001 12 13 Date: 2012-10-24 20:59:09 14 */ 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 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）存储数据点击响应
简单贴几张图，不过还是亲自测试效果好点，请点击演示地址测试。
演示地址：无限级联仅下拉选项框版本
