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

 更新时间:2011年11月15日 16:30:19   作者:   我要评论

二级联动的实现方法还真不少,实用性也很强,这里结合一个学生信息表的实例,来分享一下我的实现过程

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实现分隔条的功能

    基于JQuery实现分隔条的功能

    这篇文章主要介绍了基于JQuery实现分隔条的功能的相关资料,使用JQuery技术实现分隔条的功能,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JQuery通过AJAX从后台获取信息显示在表格上并支持行选中

    JQuery通过AJAX从后台获取信息显示在表格上并支持行选中

    这篇文章主要介绍了JQuery通过AJAX从后台获取信息显示在表格上并支持行选中的相关资料,需要的朋友可以参考下
    2015-09-09
  • jquery实现的判断倒计时是否结束代码

    jquery实现的判断倒计时是否结束代码

    在一些购物网站经常会遇到倒计时的功能,例如某些商品在一定期限内搞活动,下面小编给大家分享一段代码关于jquery实现的判断倒计时是否结束代码,希望对大家有所帮助
    2016-02-02
  • 基于bootstrap3和jquery的分页插件

    基于bootstrap3和jquery的分页插件

    这篇文章主要介绍了基于bootstrap3和jquery的分页插件的相关资料,需要的朋友可以参考下
    2015-07-07
  • jQuery EasyUI tree增加搜索功能的实现方法

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。下面通过本文给大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以参考下
    2017-04-04
  • 超好用的jQuery分页插件jpaginate用法示例【附源码下载】

    超好用的jQuery分页插件jpaginate用法示例【附源码下载】

    这篇文章主要介绍了超好用的jQuery分页插件jpaginate用法,结合实例形式简单分析了jQuery分页插件jpaginate的基本调用方式、参数属性及配置方法,并附带源码供读者下载,需要的朋友可以参考下
    2018-12-12
  • Jquery Ajax Error 调试错误的技巧

    Jquery Ajax Error 调试错误的技巧

    jquery在程序开发ajax应用程序时提高了效率,减少了需要兼容性的问题,当我们在ajax项目中,遇到ajax异步获取数据出错该怎么解决呢,我们可以通过捕捉error事件来获取出错的信息,本文给大家介绍jquery ajax error调试错误的技巧,感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery基于Ajax方式提交表单功能示例

    jQuery基于Ajax方式提交表单功能示例

    这篇文章主要介绍了jQuery基于Ajax方式提交表单功能,结合实例形式分析了jQuery使用ajax方式提交表单的具体步骤与常见操作技巧,需要的朋友可以参考下
    2017-02-02
  • jquery实现列表上下移动功能

    jquery实现列表上下移动功能

    这篇文章主要为大家详细介绍了jquery 实现列表上移、下移功能的相关资料,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • jQuery侧边栏实现代码

    jQuery侧边栏实现代码

    本文给大家介绍jquery侧边栏实现代码,这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,可以参考下本文实现代码
    2016-05-05

最新评论