<!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. 异步函数封装请确保异步性（Javascript需要养成的良好习惯）

    背景假设: 你有许多的配置信息存放在服务器上,因为配置太多,不希望每次都把所有的配置信息都写到前端,希望能需要用的时候再获取就好了. 因为Javascript单线程运行,你不希望堵塞ui渲染于是你专门 ...

  2. EasyUI之加载js文件顺序

    在使用EasyUI时,需要引用EasyUI框架的js文件,要注意加载的顺序,jquery.min.js一定要第一个被加载.

  3. Asp.net 事件管道

    1.BeginRequest 2.AuthenticateRequest  验证请求,开始检查用户的身份,一般是获取请求的用户信息 3.PostAuthenticateRequest  用户身份检查完 ...

  4. Informatica Lookup Transformation组件的Connect 与Unconnected类型用法

    Informatica Lookup Transformation组件的Connect 与Unconnected类型用法及区别:下面是通一个Lookup在不同Mapping中的使用: 1. Conne ...

  5. C++ 之 auto_ptr and shared_ptr

    1.auto_ptr 这个所谓的只能指针有点鸡肋!  没有引用计数,而且还有一个所有权转移的情况! 当所有权转移后,以前的auto_ptr将会成为null 2.shared_ptr 增加了引用计数,没 ...

  6. linux安装jdk(以centos安装jdk1.7为例)

    1准备工作: 1 虚拟机一台vmware12,安装64位centos 2 oracle官网下载jdk1.7-linux-x64.rpm 3 winscp将jdk传送到linux上面 2开始安装: 1 ...

  7. Visual Studio 2015 Update 1 ISO

    Visual Studio Community 2015 with UPDATE 1___________________________________________English ENU - h ...

  8. 第3.2 使用案例1：股票期货stock portfolio 21050917

    As mentioned earlier in the chapter, the first use case revolves around a stock portfolio use case  ...

  9. 【转】输入/输出流 - 深入理解Java中的流 (Stream)

    基于流的数据读写,太抽象了,什么叫基于流,什么是流?Hadoop是Java语言写的,所以想理解好Hadoop的Streaming Data Access,还得从Java流机制入手.流机制也是JAVA及 ...

  10. js⑤

    ##返回在制定位置的的字符  var result = str.charAt(1);  console.log(result);  console.log(str[1]); ##返回在指定的位置的字符 ...