以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. python time模块和datetime模块详解

    一.time模块 time模块中时间表现的格式主要有三种: a.timestamp时间戳,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量 b.struct_time时间元组,共 ...

  2. 2.opencv图像处理常用操作

    图像的平滑处理 平滑,也称 模糊, 平滑处理时需要用到一个滤波器 .滤波器想象成一个包含加权系数的窗口,这个加权系数也叫做核或者模版. // 图像平滑处理分而学之.cpp : 定义控制台应用程序的入口 ...

  3. WPF之Binding对数据的转换（第五天）

    Binding在Slider控件与TextBox控件之间建立关联,值可以互相绑定,但是它们的数据类型是不同的,Slider是Double类型,Text为String.原来,Binding有一种机制称为 ...

  4. 拥抱ARM妹纸第二季 之 第一次 点亮太阳

    上次做鱼缸LED灯时还有很多材料正好拿来用.穆等等哥- 俺去找材料. 材料列表     3W LED   x  3     散热片     x  1     恒流IC     x  1     其他零 ...

  5. mapreduce 实现pagerank

    输入格式: A 1 B,C,D B 1 C,Dmap: B A 1/3 C A 1/3 D A 1/3 A |B,C,D C B 1/2 D B 1/2 B |C,Dreduce: B (1-0.85 ...

  6. 分析 "ADO" "ADODB" "ADODC" 之间的区别与联系

    在敲学生信息管理系统的时候,通过查阅了解了一些关于 ADO / ADODB / ADODC / 的简单描述,想想将他们对 比着总结一下更容易理解记忆.尽管都是一些浅显的东西,不过对像我这样的菜鸟们还是 ...

  7. anroid ndk编译ffmpeg 引用librtmp libx264

    Ffmpeg 无处不在,自然android系统少不了它,折腾了不少时间完成 ndk编译ffmpeg,生成so库中引用了外部库librtmp,libx264.条条大路通罗马, 也许还有别的更好的方法去完 ...

  8. 【BestCoder】【Round#29】

    T1 啊……a^b 与 c^d比较大小,我们可以两边取对数,转化成 log(a^b)=b*log(a) 和d*log(c) 这样就能直接算了……然后稍微搞一下精度什么的就A了=.= //BC #29 ...

  9. 【BZOJ】【1965】SHUFFLE 洗牌

    扩展欧几里德+快速幂 每次转换位置:第x位的转移到2*x %(n+1)这个位置上 那么m次后就到了(2^m)*x %(n+1)这个位置上 那么找洗牌m次后在 l 位置上的牌就相当于解线性模方程: (2 ...

  10. 首次push本地代码到github上出现的问题及解决方案

    刚创建的github版本库,在push代码时出错: $ git push -u origin masterTo git@github.com:******/Demo.git ! [rejected] ...