省市二级联动小案例讲解


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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
javascript cookie的简单应用
Feb 24 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
如何使用JavaScript实现栈与队列
Jun 24 Javascript
JS代码优化的8点建议
Feb 04 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正则提取图片地址
2014/03/27 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python中的两个内置模块介绍
2015/04/05 Python
python的文件操作方法汇总
2017/11/10 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python实现电子书翻页小程序
2019/07/23 Python
基于python实现文件加密功能
2020/01/06 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
党员违纪检讨书
2014/02/18 职场文书
公务员培的训心得体会
2014/09/01 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
JS数组方法some、every和find的使用详情
2021/10/05 Javascript