欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-24 09:33:34
...
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery

实现原理:根据省份值的变动,通过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
);接着搭个前台架子:

复制代码 代码如下:













省份

地市

学生姓名


接着就是jQuery部分,详解可看代码后注释部分:
复制代码 代码如下:



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