省市二级联动小案例讲解


Posted in Javascript onJuly 24, 2016

在网页开发过程中,选择省市的时候,省市之间有关联,这是一个小小的二级联动案例 ,运用到HTML、css、php、js以及

AJAX的异步请求

首先建立city.php和province.php文件和connet.html,将二级联动的大概结构写出来,html代码如下:

<label>省份:</label>
<select id="province">
<option>请选择</option>
</select>
<label>城市:</label>
<select id="city">

<option>请选择</option>
</select>

js代码以及ajax请求如下:

<script>
// 通过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<arr.length;i++){
// <option>请选择</option>

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<opts.length;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<arr.length;i++){
// <option>城市</option>

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;
}
</script>
province.php代码如下:
<?php
// 将省份信息进行响应
echo '吉林省,辽宁省,山东省';
?>

city.php代码如下:

<?php
// 1. 接收客户端的请求数据
$province = $_POST['province'];
// 2. 根据省份的不同,提供不同的城市
switch ($province){
case '吉林省':
echo '长春市,松原市,白山市,通化市,辽源市';
break;
case '辽宁省':
echo '沈阳市,大连市,锦州市,铁岭市,丹东市';
break;
case '山东省':
echo '济南市,青岛市,威海市,日照市,德州市';
break;
}

最终的界面图如下:

省市二级联动小案例讲解

以上所述是小编给大家介绍的省市二级联动小案例,希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木!

Javascript 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
一个网马的tips实现分析
Nov 28 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
node.js实现上传文件功能
Jul 15 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
jquery实现ajax加载超时提示的方法
Jul 23 #Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 #Javascript
js的各种排序算法实现(总结)
Jul 23 #Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 #Javascript
javaScript事件机制兼容【详细整理】
Jul 23 #Javascript
You might like
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Django添加feeds功能的示例
2018/08/07 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
详解Python 最短匹配模式
2020/07/29 Python
用python发送微信消息
2020/12/21 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
小学教师评语大全
2014/04/23 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
小学毕业教师寄语
2019/06/21 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers