jQuery+PHP+MySQL简单无限级联实现
2014-11-18 13:51
411 查看
本文简单实现jQuery无限级联效果。
主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件)
效果图:
图(1) 仅下拉框
图(2)层级提示+下拉框
图(3)存储数据点击响应
简单贴几张图,不过还是亲自测试效果好点,请点击演示地址测试。
演示地址:无限级联仅下拉选项框版本 带层级提示版本
下载地址:源码
作者:Zjmainstay
出处:http://www.cnblogs.com/Zjmainstay/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件)
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>
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
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)存储数据点击响应
简单贴几张图,不过还是亲自测试效果好点,请点击演示地址测试。
演示地址:无限级联仅下拉选项框版本 带层级提示版本
下载地址:源码
作者:Zjmainstay
出处:http://www.cnblogs.com/Zjmainstay/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章推荐
- jQuery+PHP+MySQL简单无限级联实现
- jQuery+PHP+MySQL实现无限级联下拉框效果
- jQuery+PHP+MySQL实现无限级联下拉框效果
- jQuery(Ajax)/PHP/MySQL实现搜索自动提示功能
- PHP+Mysql+jQuery实现发布微博程序--jQuery篇
- PHP+MYSQL+SESSION+ThinkPHP实现简单购物车功能
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- PHP+MySql实现的简单分页类的封装
- PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- PHP+MYSQL实现无限级分类管理
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- jQuery+PHP+MySQL实现二级联动下拉菜单
- PHP+Mysql+jQuery实现动态展示信息
- 一个简单的php实现的MySQL数据浏览器
- PHP+Mysql+jQuery实现查询和列表框选择操作
- PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置
- PHP+MySQL+jQuery实现贴便签功能
- PHP+MySQL+jQuery实现发布微博程序——PHP篇
- PHP+Mysql+jQuery实现发布微博程序 jQuery篇