<!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. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

  2. B树

    /************************************************ *作者:陈新 *时间:2014 6.3 *邮箱:cx2pirate@gmail.com * **** ...

  3. JSOI2016R3 瞎BB题解

    题意请看absi大爷的blog http://absi2011.is-programmer.com/posts/200920.html http://absi2011.is-programmer.co ...

  4. 日常contest总结

    codeforces#352 div2 A 一个字符串的构造规律为1234567891011 问该字符串第i个数字是哪个 n<=1000 枚举即可 考虑这道题的拓展 当n=1e9的时候按位数枚举 ...

  5. C# unity3d 贪吃蛇 游戏 源码 及其感想

    这个游戏的设计过程是这样的: 1,创建

  6. The guard was taken to hospital in a critical condition.

    The Prince George's County Fire Department said the guard was taken to hospital in a critical condit ...

  7. WPF环境下多点触屏开发的一些经验(转)

    本系列将介绍Multi-Touch(MT)多点触控技术的相关内容,使开发人员了解如何在Windows 平台中开发出具有MT 功能的应用程序.众所周知Windows 7 操作系统自身已经支持具有MT 功 ...

  8. 最后一次PSP

    PSP: 一.计划 完成这个任务需要五天左右. 二.开发 1.需求分析: 作为一个排球比赛的现场工作人员,我需要统计每一名球员的得分以及技术统计(如:发球,拦网,一传等等),以便于颁发每场比赛的MVP ...

  9. php数组常见的几种遍历方法

    1.foreach遍历 $arr[] = array('first'=>green,'second'=>'yellow','third'=>'blue'); foreach($arr ...

  10. std::vector<bool>中的坑

    http://www.cplusplus.com/reference/vector/vector/?kw=vector C++中,vector<bool>为了达到节省内存的目的,专门做了特 ...