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 相关文章推荐
简单的js分页脚本
May 21 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
Vuex入门到上手教程
Jun 20 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
浅析TypeScript 命名空间
Mar 19 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
JavaScript的目的分析
2007/01/05 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
javascript操作cookie
2017/01/17 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
python创建临时文件夹的方法
2015/07/06 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
什么是python的id函数
2020/06/11 Python
详解如何修改python中字典的键和值
2020/09/29 Python
C语言笔试题回忆
2015/04/02 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
数控技术专业推荐信
2013/11/01 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
分公司负责人任命书
2014/06/04 职场文书
工会工作先进事迹
2014/08/18 职场文书
单位提档介绍信
2015/10/22 职场文书