当前位置:首页 > 技术文档 > 正文内容

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

admin10年前 (2015-08-11)技术文档1912
二级联动的实现方法还真不少,实用性也很强,这里结合一个学生信息表的实例,来分享一下我的实现过程

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


好了,差不多结束吧!


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/93.html

分享给朋友:

“jQuery结合PHP+MySQL实现二级联动下拉列表[实例]” 的相关文章

php登录函数login session+mysql

<?php // 为php和mysql剔除不安全html代码。 //http://blog.ddian.cn function safestrip($string){    $string = strip_tags(...

php检查用户名是否符合规定

<?php   /**  * 检查用户名是否符合规定 (两个字符以上,只能有中文,字母,数字,下划线的)  *  * @param STRING $username 要检查的用户名...

php简单分页类

<?php class page{            public $page; //当前页     publi...

git的几个小技巧

git的几个小技巧

分享git的几个小技巧,后面会根据使用补充。目前包括git撤销本地修改、git回退到前n个版本、git多用户提交冲突解决、git 命令简化。欢迎大家补充^_*1、git撤销本地修改 Java git reset --hard origin/ma...

PHP数组和Json之间的转换

        之所以要用到Json,很多时候是因为使用ajax对象时,程序与JS函数之间的数据交互。因为JS不认识PHP中的数组,PHP也不认识JS中的数组或对象。Json很好的解决了这个问题。Json简介  ...

PHP实现百度、网易、新浪短网址服务的API接口调用

[导读] 看了几个短网址API服务,于是把它们整理出来,方便以后使用,目前,提供靠谱的短网址API接口的公司不多(谷歌、百度、新浪微博、网易等),而像腾讯微博、淘宝这几个巨头的短网址服务都是...    PHP实现百度、网易、新浪短网址服务的API接口调用  ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。