jQuery+PHP+MySQL实现无限级联下拉框效果


Posted in Javascript onFebruary 19, 2016

 本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下
 效果图:

jQuery+PHP+MySQL实现无限级联下拉框效果

 图1 仅下拉框

jQuery+PHP+MySQL实现无限级联下拉框效果

  图2 层级提示+下拉框

jQuery+PHP+MySQL实现无限级联下拉框效果

图3 存储数据点击响应

主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件)
1. index.html

<html>
<head>
 <title>无限级联</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="jilianContainer"></div>
<script type="text/javascript">
$(document).ready(function(){
 var getData = function(obj){
  $.ajax({
   url:'wuxianjilian.php',
   type:'POST',
   data:{"pid":obj.val()},
   dataType:'json',
   async:false,
   success:function(data){
    if($(".selection").length){
     $(".selection:gt("+$(obj).index()+")").remove(); //移除后面所有子级下拉菜单
     $(".selection:last").after(data);     //添加子级下拉菜单
    }else {
     $("#jilianContainer").append(data);     //初始加载情况
    }
    //所有下拉响应
    $(".selection").unbind().change(function(){
     getData($(this));
    });
   },
   error:function(msg){
    alert('error');
   }
  });
 }
 
 //Init
 getData($(this));
 
});
</script>

<!-- 数据存储示例,仅提取数据,不做操作 -->

<div style="height:100px;display:block;"></div>
<input type="button" value="存储数据" id="save"></input>
<script type="text/javascript">
$(document).ready(function(){
 $("#save").click(function(){
  var data = [];
  $(".selection").each(function(){
   data.push($.trim($(this).val()));
  })
  
  alert(data.join(','));
 });
});
</script>

</body>
</html>

2. wuxianjilian.php

<?php
 header("Content-type: text/html; charset=utf-8"); 

 //数据库连接操作
 $conn = mysql_connect("localhost","Zjmainstay","") or die("Can not connect to database.Fatal error handle by ". __FILE__);
 mysql_select_db("test",$conn);   //数据库名为 test
 mysql_query("SET NAMES utf8",$conn);
 
 //获取父级id
 $pid = (int)$_POST['pid'];
 
 //查询子级
 $sql = "SELECT id,text FROM `wuxianjilian` WHERE pid={$pid}";
 $result = mysql_query($sql,$conn);
 
 //组装子级下拉菜单
 $html = '';
 while($row = mysql_fetch_assoc($result)){
  $html .= '<option value="'.$row['id'].'">'.$row['text'].'</option>';
 }

 if(!empty($html)) $html = '<select class="selection"><option value="">请选择</option>' . $html . '</select>';
 
 //输出下拉菜单
 echo json_encode($html);
//End_php

3. wuxianjilian.sql

wuxianjilian.sql
/*
Navicat MySQL Data Transfer

Source Server   : localhost
Source Server Version : 50516
Source Host   : localhost:3306
Source Database  : test

Target Server Type : MYSQL
Target Server Version : 50516
File Encoding   : 65001

Date: 2012-10-24 20:59:09
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `wuxianjilian`
-- ----------------------------
DROP TABLE IF EXISTS `wuxianjilian`;
CREATE TABLE `wuxianjilian` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `pid` int(11) DEFAULT NULL,
 `text` varchar(32) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of wuxianjilian
-- ----------------------------
INSERT INTO `wuxianjilian` VALUES ('1', '0', 'A0');
INSERT INTO `wuxianjilian` VALUES ('2', '0', 'B0');
INSERT INTO `wuxianjilian` VALUES ('3', '1', 'C1');
INSERT INTO `wuxianjilian` VALUES ('4', '1', 'D1');
INSERT INTO `wuxianjilian` VALUES ('5', '1', 'E1');
INSERT INTO `wuxianjilian` VALUES ('6', '2', 'F2');
INSERT INTO `wuxianjilian` VALUES ('7', '2', 'G2');
INSERT INTO `wuxianjilian` VALUES ('8', '3', 'H3');
INSERT INTO `wuxianjilian` VALUES ('9', '3', 'I3');
INSERT INTO `wuxianjilian` VALUES ('10', '3', 'J3');
INSERT INTO `wuxianjilian` VALUES ('11', '3', 'K3');
INSERT INTO `wuxianjilian` VALUES ('12', '4', 'L4');
INSERT INTO `wuxianjilian` VALUES ('13', '4', 'M4');
INSERT INTO `wuxianjilian` VALUES ('14', '8', 'N8');
INSERT INTO `wuxianjilian` VALUES ('15', '9', 'N9');
INSERT INTO `wuxianjilian` VALUES ('16', '14', 'O14');
INSERT INTO `wuxianjilian` VALUES ('17', '14', 'P14');
INSERT INTO `wuxianjilian` VALUES ('18', '14', 'Q14');
INSERT INTO `wuxianjilian` VALUES ('19', '17', 'R17');
INSERT INTO `wuxianjilian` VALUES ('20', '17', 'S18');
INSERT INTO `wuxianjilian` VALUES ('21', '20', 'T20');

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
js控制input输入字符解析
Dec 27 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
如何编写jquery插件
Mar 29 jQuery
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
js面向对象的写法
Feb 19 #Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 #Javascript
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
javascript下使用Promise封装FileReader
Feb 19 #Javascript
javascript每日必学之循环
Feb 19 #Javascript
jQuery实现简单的DIV拖动效果
Feb 19 #Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
基于mysql的bbs设计(四)
2006/10/09 PHP
为查询结果建立向后/向前按钮
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python基础教程之序列详解
2014/08/29 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python安装第三方库的3种方法
2015/06/21 Python
python 网络爬虫初级实现代码
2016/02/27 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
python 实现两个线程交替执行
2020/05/02 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
春季防火方案
2014/05/10 职场文书
员工合理化建议书
2014/05/19 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
初中班干部工作总结
2015/08/10 职场文书
谢师宴学生答谢词
2015/09/30 职场文书