jQuery+PHP+MySQL二级联动下拉菜单实例讲解


Posted in Javascript onOctober 27, 2015

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。
实现效果:当选择大类时,小类下拉框里的选项内容也随着改变。

实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理。
XHTML
首先我们要建立两个下拉选择框,第一个是大类,第二个是小类。大类的值可以是预先写好,也可以是从数据库读取。

<label>大类:</label> 
<select name="bigname" id="bigname"> 
  <option value="1">前端技术</option> 
  <option value="2">程序开发</option> 
  <option value="3">数据库</option> 
</select> 
<label>小类:</label> 
<select name="smallname" id="smallname"> 
<option value="1">flash</option> 
<option value="2">ps</option> 
</select>

jQuery
先写一个函数,获取大类选择框的值,并通过$.getJSON方法传递给后台server.php,读取后台返回的JSON数据,并通过$.each方法遍历JSON数据,将对应的值写入一个option字符串,最后将option追加到小类里。

function getSelectVal(){ 
  $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ 
    var smallname = $("#smallname"); 
    $("option",smallname).remove(); //清空原有的选项 
    $.each(json,function(index,array){ 
      var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
      smallname.append(option); 
    }); 
  }); 
}

注意,在遍历JSON数据追加之前一定要先将小类里的原有的项清空。清空选项的方法有两种,一种是上文代码中提到,还有一种更简单直接的方法:

smallname.();

然后,在页面载入后执行调用函数:

$(function(){ 
  getSelectVal(); 
  $("#bigname").change(function(){ 
    getSelectVal(); 
  }); 
});

在页面初始的时候,下拉框是要设置选项的,所以在初始的时候就要调用getSelectVal(),而当大类选项改变时,也调用了getSelectVal()。
PHP

include_once("connect.php"); //链接数据库 
 
$bigid = $_GET["bigname"]; 
if(isset($bigid)){ 
  $q=mysql_query("select * from catalog where cid = $bigid"); 
  while($row=mysql_fetch_array($q)){ 
    $select[] = array("id"=>$row[id],"title"=>$row[title]); 
  } 
  echo json_encode($select); 
}

根据jQuery传递过来的大类的value值,构造SQL语句查询分类表,最终输出JSON数据。本站在未做特别说明的情况下所使用的PHP与MySQL连接,和查询语句等均使用原始语句方法如mysql_query等,目的就是为了让读者能够直观的知晓数据的传输查询。
最后附上MYSQL表结构:

CREATE TABLE `catalog` ( 
 `id` mediumint(6) NOT NULL auto_increment, 
 `cid` mediumint(6) NOT NULL default '0', 
 `title` varchar(50) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

以上就是介绍了jQuery+PHP+MySQL三者结合如何实现的二级联动下拉菜单,程序还有一些不足之处,需要继续完善,希望本文可以给大家一点启发。

Javascript 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 #Javascript
jquery实现的V字形显示效果代码
Oct 27 #Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 #Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 #Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 #Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 #Javascript
You might like
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
VUE实现移动端列表筛选功能
2019/08/23 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python将图片转换为字符画的方法
2020/06/16 Python
对numpy中shape的深入理解
2018/06/15 Python
详解Python:面向对象编程
2019/04/10 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python 6种方法实现单例模式
2020/12/15 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
优秀大学生求职自荐信范文
2014/04/19 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
Python中常见的导入方式总结
2021/05/06 Python
使用Django实现商城验证码模块的方法
2021/06/01 Python