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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
angular *Ngif else用法详解
Dec 15 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/12/02 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP实现百度人脸识别
2019/05/06 PHP
jquery中ajax学习笔记一
2011/10/16 Javascript
JS重要知识点小结
2011/11/06 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
postman和python mock测试过程图解
2020/02/22 Python
Django视图、传参和forms验证操作
2020/07/15 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
华为慧通面试题
2012/09/11 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
学生保证书范文
2014/04/28 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
工作报告范文
2019/06/20 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Java设计模式之代理模式
2022/04/22 Java/Android