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 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
jQuery实现滚动效果
Nov 17 jQuery
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
Vue中的Props(不可变状态)
Sep 29 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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
详解python运行三种方式
2019/05/13 Python
Python类反射机制使用实例解析
2019/12/30 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
体育活动总结范文
2014/05/04 职场文书
新党章心得体会
2014/09/04 职场文书
贷款承诺书
2015/01/20 职场文书
2016教师节问候语
2015/11/10 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android