jQuery+PHP+MySQLシンプル無限カスケード実装
53384 ワード
本論文では,jQuery無限カスケード効果を簡単に実現した.
主に3つのファイルを含む:index.html(ホームページ)、wuxianjilian.php(データ処理)、wuxianjilian.sql(MySQLデータファイル)
1. index.html
2. wuxianjilian.php
3. wuxianjilian.sql
効果図:
図(1)プルダウンのみ
図(2)レベルヒント+ドロップダウンボックス
図(3)記憶データクリック応答
簡単に何枚かの図を貼りますが、自分でテストしたほうが効果的です.プレゼンテーションアドレスをクリックしてテストしてください.
プレゼンテーションアドレス:無限カスケードドロップダウン・オプション・ボックスのバージョンのみ
ダウンロードアドレス:jQuery+PHP+MySQL単純無限カスケード実現ソースコード
主に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 .= '';
20 }
21
22 if(!empty($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 : 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単純無限カスケード実現ソースコード