jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介:

jQuery结合PHP-MySQL实现二级联动下拉列表 学生信息表的实例

实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果!

为便于讲解,这里直接给出省份:河南省(sf_id=1) 浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句!

复制代码代码如下:

/* 地市表 */ 
create TABLE IF NOT EXISTS `dishi`( 
`ds_id` int(3) auto_increment not null primary key, 
`sf_id` int(3) not null default '0', 
`ds_name` varchar(50) not null 
); 
/* 学生表 */ 
create TABLE IF NOT EXISTS `xuesheng`( 
`xs_id` int(3) auto_increment not null primary key, 
`ds_id` int(3) not null default '0', 
`xs_name` varchar(50) not null 
);接着搭个前台架子: 

 

复制代码代码如下:

<table border="0" width="100%"> 
<tr> 
<td width=100>省份</td> 
<td> 
<select name="sf_id" id="sf_id" title="选择省份"> 
<option value="1">河南省</option> 
<option value="2">浙江省</option> 
</select> 
</td> 
</tr> 
<tr> 
<td>地市</td> 
<td> 
<select name="ds_id" id="ds_id" title="选择地市"> 

</select> 
</td> 
</tr> 
<tr> 
<td>学生姓名</td> 
<td><input type=text maxlength=20 name="xs_name" value=""></td></tr> 
</table> 


接着就是jQuery部分,详解可看代码后注释部分: 

复制代码代码如下:

<script language="JavaScript"> 
function getVal(){ 
$.getJSON("select.php",{sf_id:$("#sf_id").val()},function(json){ 
var ds_id = $("#ds_id"); 
$("option",ds_id).remove(); //清空原有的选项,也可使用 ds_id.empty(); 
$.each(json,function(index,array){ 
var option = "<option value='"+array['ds_id']+"'>"+array['ds_name']+"</option>"; 
ds_id.append(option); 
}); 
}); 

//下面是页面加载时自动执行一次getVal()函数 
$().ready(function(){ 
getVal(); 
$("#sf_id").change(function(){//省份部分有变动时,执行getVal()函数 
getVal(); 
}); 
}); 
</script> 

其中的select.php就是关键部分了,此文件接收前台通过$.getJSON方法传递过来的参数 sf_id,然后select.php根据省份sf_id获取对应的地市数据,再返回JSON数据,前台通过jQuery将JSON数据进行处理,写入<option>,即完成了联动效果! 

复制代码代码如下:

$sf_id = $_GET["sf_id"]; 
if(isset($sf_id)){ 
$q=mysql_query("select * from dishi where sf_id = $sf_id"); 
while($row=mysql_fetch_array($q)){ 
$select[] = array("ds_id"=>$row['ds_id'],"ds_name"=>urlencode($row['ds_name'])); 

echo urldecode(json_encode($select)); 


其中的urlencode()、urldecode()函数为防止中文数据库内容乱码!这里还需要注意的是,select.php不得再有其它数据返回,免得JSON返回错误! 

最后补充一下,有童鞋问这效果在添加学生信息的时候能方便使用,如果有传递过来的学生信息需要编辑时,不能直接显示要编辑的学生所处的地市!这里就需要加个判断了: 

首先将上面的:<select name="ds_id" id="ds_id" title="选择地市"> </select>部分做个判断 

复制代码代码如下:

<select name="ds_id" id="ds_id" title="选择地市"> 
<?php if( isset($_GET['ds_id']) ){//返回要编辑的学生所属的地市 
$sql="SELECT * FROM dishi WHERE ds_id=".$ds_id; 
$resultds=mysql_query($sql,$conn); 
while($listds=mysql_fetch_array($resultds)){ ?> 
<option value="<?php echo $listds['ds_id'] ?>" <?php if( $listds['ds_id']==$ds_id ){ echo 'selected="selected"'; } ?> name="ds_id"><?php echo $listds['ds_name'] ?></option> 
<?php } ?> 
<?php } ?> 
</select> 


然后在页面加载时,首次执行getVal()函数前做判断,说明看注释部分: 

复制代码代码如下:

$().ready(function(){ 
//当$ds_id不为空,表示加载修改状态的表单,此时就不能在页面加载时立即调用getVal()函数,以避免无法显示要修改的账目所在的收支分类 
<?php if( empty($ds_id) ){ ?>//当$ds_id为空,表示加载添加表单,此时要在页面加载时立即调用getVal()函数,以显示当前收支类型的子分类 
getVal(); 
<?php } ?> 
$("#sf_id").change(function(){ 
getVal(); 
}); 
}); 

好了,差不多结束吧!

本文转自博客园知识天地的博客,原文链接:jQuery结合PHP+MySQL实现二级联动下拉列表[实例],如需转载请自行联系原博主。

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
27天前
|
存储 关系型数据库 MySQL
MySQL数据类型详解及实例应用
MySQL数据类型详解及实例应用
|
30天前
|
Prometheus 监控 Cloud Native
使用mysqld_exporter监控所有MySQL实例
使用mysqld_exporter监控所有MySQL实例
54 2
|
3天前
|
缓存 分布式计算 关系型数据库
数据管理DMS操作报错合集之当进行RDS实例的可用区迁移时,提示“缓存清理”是什么意思
数据管理DMS(Data Management Service)是阿里云提供的数据库管理和运维服务,它支持多种数据库类型,包括RDS、PolarDB、MongoDB等。在使用DMS进行数据库操作时,可能会遇到各种报错情况。以下是一些常见的DMS操作报错及其可能的原因与解决措施的合集。
|
7天前
|
关系型数据库 MySQL 数据库
MySQL数据库——多表查询(4)-实例练习、多表查询总结
MySQL数据库——多表查询(4)-实例练习、多表查询总结
12 1
|
8天前
|
Ubuntu 关系型数据库 MySQL
ubuntu apt 安装wordpress所需所有的 一键脚本 扩展您的PHP似乎没有安装运行WordPress所必需的MySQL扩展。
ubuntu apt 安装wordpress所需所有的 一键脚本 扩展您的PHP似乎没有安装运行WordPress所必需的MySQL扩展。
ubuntu apt 安装wordpress所需所有的 一键脚本 扩展您的PHP似乎没有安装运行WordPress所必需的MySQL扩展。
|
9天前
|
SQL 关系型数据库 数据库
17. Python 数据库操作之MySQL和SQLite实例
17. Python 数据库操作之MySQL和SQLite实例
42 2
|
22天前
|
关系型数据库 MySQL PHP
unbuntu搭建LAMP(Apache2+PHP+MySQL+phpmyadmin)
unbuntu搭建LAMP(Apache2+PHP+MySQL+phpmyadmin)
|
30天前
|
分布式计算 DataWorks 关系型数据库
DataWorks操作报错合集之DataWorks集成实例绑定到同一个vpc下面,也添加了RDS的IP白名单报错:数据源配置有误,请检查,该怎么处理
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
38 0
|
30天前
|
关系型数据库 MySQL PHP
【PHP 开发专栏】PHP 连接 MySQL 数据库的方法
【4月更文挑战第30天】本文介绍了 PHP 连接 MySQL 的两种主要方法:mysqli 和 PDO 扩展,包括连接、查询和处理结果的基本步骤。还讨论了连接参数设置、常见问题及解决方法,如连接失败、权限和字符集问题。此外,提到了高级技巧如使用连接池和缓存连接信息以优化性能。最后,通过实际案例分析了在用户登录系统和数据管理中的应用。
|
30天前
|
DataWorks NoSQL 关系型数据库
DataWorks操作报错合集之在使用 DataWorks 进行 MongoDB 同步时遇到了连通性测试失败,实例配置和 MongoDB 白名单配置均正确,且同 VPC 下 MySQL 可以成功连接并同步,但 MongoDB 却无法完成同样的操作如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。