以JQuery为JS,写的Ajax省市联动。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title> <script src="Script/jquery-1.10.2.js" type="text/javascript"></script> <script src="Script/Common.js" type="text/javascript"></script> <script type="text/javascript">
var xhr=false;
var proSel=false;//selPro
var citySel=false;//selCity
var Pid=false;
$(function(){ xhr=createXhr(); proSel=$('#selPro');
citySel=$('#selCity'); //加载省下拉框数据
getAreaData(0); //省下拉框发生改变时,加载市下拉框数据
proSel.change(function(){
Pid=$(this).val();
getAreaData(Pid);
}); }); //1.
function getAreaData(pId){
//1.open
xhr.open('get','1-getAreaData.ashx?pid='+pId,true);
//2.set
xhr.setRequestHeader('If-Modified-since',0);
//3.onreadystatechange
xhr.onreadystatechange=function(){ if(xhr.readyState==4){
if(xhr.Status==200){
var res=xhr.responseText;
if (pId==0){
data2Sel(res,proSel);
//首次加载时,加载市下拉框数据
pId=$(':selected').val();
getAreaData(pId);
}else{
data2Sel(res,citySel);
} }
}
}; xhr.send();
} //2.
function data2Sel(data,selOption){
selOption.empty(); var res=eval(data); for(var i=0;i<res.length;i++){
var opt=false;
if(i==2){
opt=$('<option value='+res[i].Id+' selected=true>'+res[i].Name+'</option>');
}else{
opt=$('<option value='+res[i].Id+'>'+res[i].Name+'</option>');
}
selOption.append(opt);
}
} </script> </head>
<body>
<select id="selPro">
</select>
<select id="selCity">
</select>
</body>
</html>

Ajax省市联动的更多相关文章

  1. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

  2. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  3. AJAX案例四:省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. AJAX应用案例之省市联动

    jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...

  5. ajax做省市联动

    原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建<option>,添加到<select name=”provi ...

  6. 练习: 省市联动(Ajax)

    // 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...

  7. ajax经典案例--省市联动

    ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...

  8. JS 省市联动 ajax

    省市联动 //省市联动     $('.locationCode').change(function () {         var val = $(this).val();         if ...

  9. Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

随机推荐

  1. 1102. Invert a Binary Tree (25)

    The following is from Max Howell @twitter: Google: 90% of our engineers use the software you wrote ( ...

  2. js之正则表达式(下)

    1.分组之exec返回数组 1>非分组匹配的exec返回数组: var pattern =/\d+[a-z]+/; var str='234google'; alert(pattern.exec ...

  3. SQL Server2008附加数据库之后显示为只读

    SQL Server2008附加数据库之后显示为只读时解决方法 啰嗦的话就不多说了,直入主题吧! 方案一: 碰到这中情况一般是使用的sa账户登录的,只要改为Windows身份验证,再附加数据库即可搞定 ...

  4. CentOS 6.5系统上安装MySQL数据库

    1.查看系统是否安装了MySQL      使用命令:      #rpm -qa | grep mysql 2.卸载已安装的MySQL       卸载mysql命令如下:        #rpm ...

  5. bnuoj 33648 Neurotic Network(树形模拟题)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=33648 [题解]:结果先对MOD*2取模,才能得到结果是否是正确的奇偶问题,得到最后结果之后再对MO ...

  6. Careercup - Facebook面试题 - 6026101998485504

    2014-05-02 10:47 题目链接 原题: Given an unordered array of positive integers, create an algorithm that ma ...

  7. Windows 10 响应式设计和设备友好的开发

    使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上 ...

  8. 无法将 flash.display::Sprite@156b7b1 转换为 mx.core.IUIComponent

    无法将 flash.display::Sprite@156b7b1 转换为 mx.core.IUIComponent 在Flex Application里,是不能直接用addChild添加Sprite ...

  9. 3036: 绿豆蛙的归宿 - BZOJ

    Description 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点.到达每 ...

  10. Codeforces Round #303 (Div. 2) E. Paths and Trees 最短路+贪心

    题目链接: 题目 E. Paths and Trees time limit per test 3 seconds memory limit per test 256 megabytes inputs ...