以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. cadence通过孔焊盘的制作

    1 首先制作flash 1)制作焊盘前先计算好各项数据 thermal relief(热风焊盘):内径(ID)= 孔径 +20mil    外径(OD)= Anti_pad的直径= Regular p ...

  2. HTTP 错误 404.3 - Not Found

    在使用win2012服务器上的IIS发布网页的时候,出现下面的错误 解决办法: 将应用程序开发下的所有功能都安装. 如果上面的方法没解决问题的话,那么看看下图中的这些安装没,没有的话就继续安装.

  3. DC-EPC小结

    今晚上修完了最后2个学时的EPC(课程主页),这意味着本学期的DC和共20个学时的EPC到此结束,这有可能是我人生中最后一次上英语课. Tom是我DC课的老师,EPC起于Tom和Micheal的Deb ...

  4. C++11右值引用,移动主义

    理解1: 左值和右值针对等号而言, 等号左边称为左值, 等号右连称为右值. 理解2: 左值和右值针对表达式而言, 表达式结束后依然存在的持久对象称为左值, 表达式结束后不存在的持久对象称为右值. 理解 ...

  5. python之量的概念

    程序设计语言: 量的类型: 1. 直接量 2. 常量 3. 变量 量的因素: 1. 存储类别 2. 数据类型 3. 作用域 4. 生存期

  6. iOS JSON解析

    解析json成dic对象 -(void)fetchedData:(NSData*)responseData {//parse out the json dataNSError* error; NSDi ...

  7. nginx error_page 404 用 php header 无法跳转

    nginx error_page 404 用 php header 无法跳转 之前用Apache的时候,只需要设置 ErrorDocument 404 /404.php 就可以在 404.php 中根 ...

  8. [转]教大家如何打造使用Tcpview（tcp查看器

    原文地址:教大家如何打造使用Tcpview(tcp查看器)作者:jybasenet3   一玩 VS 对战平台的同学有一次发现了一个可以踢人的方法,就是用 TcpView 把那个连 接关掉.后来VS ...

  9. Oracle的substr函数简单用法

    substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('Hello World',0,1) //返回结果为 'H'  *从字符串第一个字符开始截取长度为1的字符串 subst ...

  10. CSS3技巧：利用css3径向渐变做一张优惠券（转）

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...