<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3/jquery.min.js"></script>
    <script>
    //首先是通过ajax获取文件
    var nuldom;
    function  showpro() {
        $.ajax({
            url:'ChinaArea.xml',
            dataTypes:'xml',
            success:function(msg){
                nuldom=msg;
             $(msg).find('province').each(function (k,v) {
                 var nm=$(this).attr('province');
                 var id=$(this).attr('provinceID')
                 $('#shengfen').append("<option value='"+id+"'>"+nm+"</option>")
             });

            }
        })
    }
     $(function () {
    showpro();
      })

//获取城市
        function  showcity() {
           var pid=$('#shengfen option:selected').val();
             $('#chengshi').empty();
           var sel= $(nuldom).find("[provinceID="+pid+"]");

                    sel.find('City').each(function () {
                        var nm1=$(this).attr('City');
                        var id=$(this).attr('CityID');
                        $('#chengshi').append("<option value='"+id+"'>"+nm1+"</option>");
                    }) ;
        }

        //区域选项
        function showarea() {
           var pid=$('#chengshi option:selected').val();
            $('#quyu').empty();
               var sel= $(nuldom).find("[CityID="+pid+"]");
            sel.find('Piecearea').each(function () {
                var nm2=$(this).attr('Piecearea');
                var id=$(this).attr('PieceareaID');
                $('#quyu').append("<option value='"+id+"'>"+nm2+"</option>");
            })

        }
    </script>
</head>
<body>
<h1>三级联动</h1>
省份：<select id="shengfen" onchange="showcity()">
      <option>--请选择省份--</option>
      </select>
城市：<select id="chengshi" onchange="showarea()">
        <option>--请选择城市--</option>
      </select>
区域：<select id="quyu" onchange="showarea()">
      <option>--请选择区域--</option>
      </select>
</body>
</html>

Ajax+JQuery的更多相关文章

  1. MVC中处理表单提交的方式（Ajax+Jquery）

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  2. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

  3. AJAX JQuery 调用后台方法返回值（不刷新页面）

    AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () {             //无 ...

  4. Ajax&jQuery教案总结

    Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...

  5. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  6. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  7. Ajax jquery的库的简化版本

    Ajax jquery的库的简化版本 (function(){    //面向外界的唯一变量接口!    var myajax = window.myajax = {};    //作者.版本号等等信 ...

  8. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  9. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  10. Python菜鸟之路：原生Ajax/Jquery Ajax/IFrame Ajax的选用

    原生Ajax Jquery Ajax IFrame Ajax 如果发送的是普通的数据,比如用户简单的输入.选择的值,推荐使用Jquery ,其次用XMLHttpRquest对象,最次使用IFrame ...

随机推荐

  1. http Content-type对照表

    http://tools.jb51.net/table/http_content_type Content-Type,内容类型,一般是指网页中存在的Content-Type,用于定 义网络文件的类型和 ...

  2. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  3. Python的入门要点

    一.输入 1.键盘输入 在python 2.7中,不用input(),而用 raw_input()读入一行键盘输入,并转化为字符串. s = map(int ,raw_input().split()) ...

  4. Raspberry Pi Resources－Using the UART

    参考:RPi Serial Connection 本文来自:http://www.raspberry-projects.com/pi/programming-in-c/uart-serial-port ...

  5. 关于Erlang中的behaviour

    唔,听说过这四个牛逼渣渣的behaviour:gen_server,gen_fsm,gen_event,supervisor.所以也就更加好奇behaviour的实现. 在解释它是怎么工作的之前,我们 ...

  6. webdriver无法打开firefox

    1.执行webdriver.firefox()报错,提示: WebDriverException: Message: "Can't load the profile. Profile Dir ...

  7. 杭电ACM1000

    #include <stdio.h> int main() { int a,b; while(scanf("%d%d",&a,&b)!=EOF) { p ...

  8. LoadRunner录制一个登录

    1.点击录制脚本 2.点击左边页面加号

  9. He faced a maximum sentence of three years.

    Police raided his home in August and found more than 100g of marijuana. He faced a maximum sentence ...

  10. C#窗体无法接受Keydown事件

    问题一描述:当新建一个窗体时,添加KeyDown事件后,会正常处理,但是当添加有控件时,比如Button,TextBox,不会触发窗体的KeyDown事件,也没有调用KeyDown事件的处理程序. 原 ...