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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
老生常谈js数据类型
2017/08/03 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python isinstance判断对象类型
2008/09/06 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
运动会通讯稿100字
2014/01/31 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers