欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

jQuery+PHP+MySQL简单无限级联实现

程序员文章站 2022-03-25 13:09:12
...

本文简单实现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 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');

效果图:

jQuery+PHP+MySQL简单无限级联实现

     图(1) 仅下拉框

jQuery+PHP+MySQL简单无限级联实现

       图(2)层级提示+下拉框

jQuery+PHP+MySQL简单无限级联实现

              图(3)存储数据点击响应

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

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

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