二级省市mysql_省市二级联动小案例讲解
在网页开发过程中,选择省市的时候,省市之间有关联,这是一个小小的二级联动案例 ,运用到HTML、css、php、js以及
AJAX的异步请求
首先建立city.php和province.php文件和connet.html,将二级联动的大概结构写出来,html代码如下:
省份:
请选择
城市:
请选择
js代码以及ajax请求如下:
// 通过Ajax从服务器端获取数据
var provinceElement = document.getElementById("province");
window.onload = function(){
// 创建核心对象
var xhr = getXhr();
// 监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//吉林省,辽宁省,山东省
var data = xhr.responseText;
// 处理数据
var arr = data.split(',');
for(var i=0;i
// 请选择
var opt = document.createElement("option");
var text = document.createTextNode(arr[i]);
opt.appendChild(text);
provinceElement.appendChild(opt);
}
}
}
// 建立连接
xhr.open("get","province.php");
// 发送数据
xhr.send(null);
}
// 2. 用户选择不同的省份
provinceElement.onchange = function(){
// a. 清除城市列表
var cityElement = document.getElementById("city");
var opts = cityElement.getElementsByTagName("option");
for(var i=1;i
cityElement.removeChild(opts[i]);
i--;
}
// b. 得到用户选择的值(省份)
var provinceValue = this.value;
if(provinceValue == "请选择"){
return false;
}
// c. 通过Ajax根据省份获取城市
var xhr = getXhr();
xhr.open("post","city.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("province="+provinceValue);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseText;
var arr = data.split(",");
for(var i=0;i
// 城市
var opt = document.createElement("option");
var text = document.createTextNode(arr[i]);
opt.appendChild(text);
cityElement.appendChild(opt);
}
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
province.php代码如下:
// 将省份信息进行响应
echo '吉林省,辽宁省,山东省';
?>
city.php代码如下:
// 1. 接收客户端的请求数据
$province = $_POST['province'];
// 2. 根据省份的不同,提供不同的城市
switch ($province){
case '吉林省':
echo '长春市,松原市,白山市,通化市,辽源市';
break;
case '辽宁省':
echo '沈阳市,大连市,锦州市,铁岭市,丹东市';
break;
case '山东省':
echo '济南市,青岛市,威海市,日照市,德州市';
break;
}
最终的界面图如下:
以上所述是小编给大家介绍的省市二级联动小案例,希望对大家有所帮助,如果大家想了解更多内容,敬请关注脚本之家!
二级省市mysql_省市二级联动小案例讲解相关推荐
- js-09二级联动购物车案例
js-09二级联动&&购物车案例 一.二级联动 二.购物车案例 一.二级联动 <body onload="fa()"><label>省份:& ...
- HTML+CSS+JavaScript小案例(注册页面表单验证轮播图跳转主页动态表格select联动)
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- access课程均不及格_二级ACCESS上机总结重点,小抄
下载word有问题请添加微信号:xuecool-com或QQ:370150219处理(尽可能给您提供完整文档),感谢您的支持与谅解. 以下是由77cn范文大全为大家整理的二级ACCESS上机总结重点, ...
- 计算机二级c语言小抄,2017年电大 全国计算机等级考试二级c语言题库新版小条小抄.doc...
2017年电大 全国计算机等级考试二级c语言题库新版小条小抄 第1套 给定程序中,函数fun的功能是根据形参i的值返回某个函数的值.当调用正确时,程序输出: xl=5.000000, x2=3.000 ...
- Axure的一些入门小案例
Axure RP是一款专业的快速原型设计工具.上手入门比较简单,可以帮助我们快速的搭建一个网页原型.接下来我写一些自己入门时候写的小案例. 1.简单的表单 左下角的元件库可以直接拖拽使用以上元件即可, ...
- Python小案例(一)非结构化文本数据处理
Python小案例(一)非结构化文本数据处理 日常业务需求中,仅凭SQL一招鲜是没法吃遍天的,这个时候就需要更为强大的Python进行支持了.这个系列主要分享一些Python小案例,都是根据笔者日常工 ...
- 2108年计算机二级考试时间,计算机二级office考前10天复习应该做哪些安排逢考必过...
距离二级office考试不到10天的时间里,还有哪些值得去学习复习二级并且高效通过二级考试的呢?相信这也是很多同学们比较关心的问题,随着二级考试即将来袭,这次office小超老师,带领同学们来看下最后 ...
- 计算机职称 计算机二级证,国家计算机二级证书含金量有多高
首先感谢你的邀请,我们都知道在大学生涯考证中,计算机二级#计算机二级#基本是在校大学生必备的证书.当然我说的必考证书是针对已经了解计算机证书的,当然可能还有一些人不了解,那学姐简单来说一下,什么是全国 ...
- 计算机二级论文大纲,计算机二级论文
海量优秀的免费计算机二级论文范文供您参考与下载,关于计算机二级论文的免费论文范文参考资料是由2016年最新的相关论文题目按照标准论文格式模板写作的,适合不知道怎么写计算机二级论文的大学毕业生,对相关的 ...
最新文章
- JavaScript / HTML5中的音效
- 抛弃PHP,WordPress.com以JavaScript重写
- php制图汉字,PHP用imageTtfText函数在图片上写入汉字
- Struts2原理图
- html 页面元素id不唯一,规定html元素的唯一的id属性
- java jobdetail_spring+quartz定时任务配置---JobDetailBean
- JQuery Mobile iscroll插件使用教程及注意事项
- mysql5.6 table cache_MySQL 5.6下table_open_cache参数优化合理配置详解
- 相见恨晚的编程学习词典!谁还不是南极滑冰的那个崽儿?!
- 前端+后端项目 - 论坛信息管理系统(Web+servlet+MySQL+JDBC)
- java三次样条函数求导_利用java语言对三次样条曲线的实现
- R语言中Axis()函数的参数详解
- web前端布局篇(切图)
- 常见的网页设计布局有哪些?优秀的网页设计都有的8个特点
- Socket套接字通信 TCP UDP详解(网络通信)
- 分别解释final,finally,finalize是什么?
- JavaSE基础——常用类1
- mplayer linux arm,MPlayer在ARM开发板的移植
- 疫情之下,培训机构招生应该怎么做?
- 计算机硬盘维护,计算机硬盘故障检测维护
热门文章
- 二叉树的递归遍历详解
- openwrt 中 uhttpd 自动跳转到 /cgi-bin/luci
- node.js接入支付宝小程序的实名认证接口
- Java堆内存溢出解决方案
- Mac 设置idea代码提示快捷键
- 2021年中国MEMS麦克风传感器市场趋势报告、技术动态创新及2027年市场预测
- python执行hivesql_python 调用shell hive sql
- html错位排列,排列组合之错位重排
- JZOJ5475.【NOIP2017提高组】day1T3逛公园
- 3.1 Python 字符串类型常用操作及内置方法