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

web前端|js教程

二级联动,下拉列表

web前端-js教程

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

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

安卓多媒体发布系统源码,vscode 打造,ubuntu pyenv,tomcat jboos,sqlite容量速度,中国有服务器吗,注册插件,前端angela框架书,爬虫大战在线观看,php高可用,江西seo培训,照片网站cms,特效网页模板,php 动态生成前端模板,微信页面滑动到底部js,spring图书管理系统,怎样购买网站程序lzw

/* 地市表 */

create TABLE IF NOT EXISTS `dishi`(

`ds_id` int(3) auto_increment not null primary key,

`sf_id` int(3) not null default ,

`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 ,

`xs_name` varchar(50) not null

);接着搭个前台架子：

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

体验站源码,ubuntu添加安装源,家里出现爬虫绿色,php blpop,做SEO好么lzw

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 = ""+array[ds_name]+"";

ds_id.append(option);

});

});

}

//下面是页面加载时自动执行一次getVal()函数

$().ready(function(){

getVal();

$("#sf_id").change(function(){//省份部分有变动时，执行getVal()函数

getVal();

});

});

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

android项目实例源码,vscode怎么用其他浏览器,ubuntu安装rpm包,tomcat挂了怎么办,sqlite 读写安全,国外优秀女包网页设计,完美服务器客服,织梦忘记密码插件,平台前端框架,三节爬虫,php写网站,西安优质seo方案,阿里p8springboot,用wordpress做的网站有哪些,网页下拉菜单模板,metinfo模板,万维网域名后台地址,点击菜单页面跳转,图书管理系统 毕业设计,vb程序动态时钟lzw

$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返回错误！

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

首先将上面的： 部分做个判断

<?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="" name="ds_id">

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

$().ready(function(){

//当$ds_id不为空，表示加载修改状态的表单，此时就不能在页面加载时立即调用getVal()函数，以避免无法显示要修改的账目所在的收支分类

//当$ds_id为空，表示加载添加表单，此时要在页面加载时立即调用getVal()函数，以显示当前收支类型的子分类

getVal();

$("#sf_id").change(function(){

getVal();

});

});

好了，差不多结束吧！