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）存储数据点击响应

简单贴几张图，不过还是亲自测试效果好点，请点击演示地址测试。

演示地址：无限级联仅下拉选项框版本

下载地址：jQuery+PHP+MySQL简单无限级联实现源码

作者：Zjmainstay

出处：http://www.cnblogs.com/Zjmainstay/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息