jQuery+PHP+MySQL簡單無限級聯實現

本文轉載自查看原文 2012-10-24 21:30 4229 級聯/ jQuery/ JS/jQuery/ 無限級聯

本文簡單實現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     //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簡單無限級聯實現源碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery+php+mysql實現Ajax省市縣三級聯動 (實用篇)jQuery+PHP+MySQL實現二級聯動下拉菜單使用jQuery+PHP+Mysql實現抽獎程序項目開發實戰 jQuery+php+mysql實現數據上傳功能 jquery $.post() 向php傳值實現簡單的二級聯動 jQuery 簡單實現select二級聯動簡單jquery實現select三級聯動 AngularJS中實現無限級聯動菜單 jQuery實現select級聯 PHP實現無限分類