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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
javascript Demo模态窗口
Dec 06 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
vue+高德地图写地图选址组件的方法
May 18 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
Terran魔法科技
2020/03/14 星际争霸
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python简明入门教程
2015/08/04 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
python代码实现图书管理系统
2020/11/30 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
初中学生评语大全
2014/04/24 职场文书
学校工作推荐信范文
2014/07/11 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
快递员岗位职责
2014/09/12 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
青年文明号申报材料
2014/12/23 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
走近毛泽东观后感
2015/06/04 职场文书
运动会通讯稿300字
2015/07/20 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers