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


Posted in Javascript onNovember 15, 2011

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(); 
}); 
});

好了,差不多结束吧!
Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
Node.js模块加载详解
Aug 16 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 #Javascript
js constructor的实际作用分析
Nov 15 #Javascript
浅谈Javascript面向对象编程
Nov 15 #Javascript
js Html结构转字符串形式显示代码
Nov 15 #Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 #Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 #Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 #Javascript
You might like
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python对数据库操作
2016/03/28 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python实现五子棋程序
2020/04/24 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
super关键字的用法
2012/04/10 面试题
梅花魂教学反思
2014/04/25 职场文书
业务内勤岗位职责
2014/04/30 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
植树节口号
2014/06/21 职场文书
北京导游词
2015/02/12 职场文书
2016国庆促销广告语
2016/01/28 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
windows系统搭建WEB服务器详细教程
2022/08/05 Servers
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS