<!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. Ubuntu 修改hosts

    Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...

  2. mysql 自动备份导出到sql

    创建一个sh文件 vi mysql_auto.sh写入如下代码 导出单个数据库 /www/wdlinux/mysql/bin/mysqldump -uroot -p123456 database &g ...

  3. 安装 mbed os 开发环境yotta

    feature: 采用Python编写, Pip 包管理 CMake, the build system that yotta usesa compiler, to actually compile ...

  4. MFC-01-Chapter01:Hello,MFC---1.3 第一个MFC程序（04）

    1.3.3 框架窗口对象 MFC的CWnd类及其派生类为窗口或应用程序创建的窗口提供了面向对象的接口. CMainWindow是从CFrameWnd类派生而来,CFrameWnd模仿框架窗口的行为,可 ...

  5. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  6. Puppet安装及部署

    本篇博客主要介绍Puppet的安装部署,后续会更新其他相关内容 一.简介 二.环境介绍 三.安装Puppet 四.配置Puppet-dashboard 五.配置Puppet Kick 一.简介 Pup ...

  7. JCS缓存使用类

    项目是一个门户网站,一些新闻等会做缓存. 导入jar包: 项目跟目录下配置文件:cache.ccf #内存缓存 jcs.default= jcs.default.cacheattributes=org ...

  8. SQL SERVER 2008 r2安装失败之Integration Service

    因工作需要,遂把以前的2008升级到r2,升级失败,具体原因忘了,卸载2008,清了注册表删了文件,结果安装的时候失败了,如下图: 下一步-有错误日志和错误的序列号,错误日志在C:\Program F ...

  9. hive学习

    大数据的仓库Hive学习  10期-崔晓光 2016-06-20  大数据   hadoop   10原文链接 我们接着之前学习的大数据来学习.之前说到了NoSql的HBase数据库以及Hadoop中 ...

  10. 虚机centos和本机Windows之间文件的拷贝无法用xftp时用FileZilla也行

    步骤如下: 1.如果Centos没有安装ssh,则需要先安装: 2.查看虚拟机中IP地址,命令如下: ifconfig 3.在windows中安装ftp软件 FileZilla启动软件如图: 6  这 ...