jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
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实现二级联动下拉列表[实例],如需转载请自行联系原博主。
文章
JavaScript · 关系型数据库 · PHP · 数据库 · 数据格式 · JSON · SQL · 前端开发 · MySQL
2017-12-10
jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]相关推荐
- jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 ...
- php mysql实现下拉列表查询_php+mysql实现二级联动下拉列表
二级联动下拉列表(select),都是从数据库中取值,其中第二级为可多选列表(multiple).若要实现二级也是下拉菜单,可以将multiple改了即可. 全动态二级联动下拉列表 /******** ...
- vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级 效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分 首先是建立两个表的实体 需要注意的就是写注解了 ...
- 二级联动怎么实现mysql_怎样实现二级联动
china.xml文档 郑州 洛阳 安阳 石家庄 邯郸 张家口 和平区 北辰区 河西区 c.html c.html var xmlDocument = null; var provinces = nu ...
- php mysql select联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery
实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给 ...
- php+js实现二级联动下拉菜单(结合mysql数据库)_jQuery结合PHP+MySQL实现二级联动下拉列表[实例]...
实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给 ...
- mysql 城市二级联动_MYSQL二级联动
表数据 查询结果 { "电器": [{ "1": [{ "parent_id": "1", "parent_n ...
- php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
- 下拉框的二级联动和回显
二级联动和回显 效果如下: 二级联动 我们首先要查询出年级表的内容,在年级表的控制层中; Controller /*** 查询nj表的内容 @RequestMapping("/spr/nj& ...
最新文章
- 笔记本电脑处理器_英特尔发布第九代酷睿移动处理器:笔记本电脑进入8核5.0GHz时代!...
- 自定义Docker容器的 hostname
- python接口测试之requests详解_Python接口测试-requests库
- 【2017年第1期】CCF大专委2017年大数据发展趋势预测
- Unity中使用多构造函数(转)
- 可以“作为医生”的 GPT-3,究竟是炒作还是名副其实?
- 蘑菇车联打造一体化解决方案,致力产业协同发展
- redis的IM的聊天工具
- ASP输出生成Word 、Excel、Txt文件的方法
- 利用Matlab寻找曲线的拐点
- kafka 的经典教程
- Linux显卡fps性能测试,如何检测应用帧率-FPS测试
- Linux——Ubuntu使用个给力的镜像,安装软件速度飞快
- 【干货】微博短视频去水印下载使用介绍
- Verilog 过程结构(initial, always)
- 计算机硬件资源如何共享,如何设置计算机共享资源
- BitMap数据结构梳理总结及代码实现
- 手动制作linux live,使用Etcher轻松制作Linux Live Disks | MOS86
- 特效师新人作品指引。
- docker容器添加微软雅黑字体