jquery读取xml文件实现省市县三级联动的方法


Posted in Javascript onMay 29, 2015

本文实例讲述了jquery读取xml文件实现省市县三级联动的方法。分享给大家供大家参考。具体如下:

页面代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>"> 
 <title>My JSP 'city.jsp' starting page</title> 
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0"> 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <!-- 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 --> 
 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
 <script type="text/javascript"> 
 $(document).ready(function(){ 
  //省 
  $.ajax({url:"xml/City.xml", 
   success:function(xml){ 
    $(xml).find("province").each(function(){ 
    var t = $(this).attr("name");//this-> 
    $("#DropProvince").append("<option>"+t+"</option>"); 
    }); 
   } 
  }); 
  //市 
  $("#DropProvince").change(function(){ 
   $("#sCity>option").remove(); 
   $("#sArea>option").remove(); 
   var pname = $("#DropProvince").val(); 
   $.ajax({url:"xml/City.xml", 
   success:function(xml){ 
    ///查找<province>下的所有第一级子元素(即城市) 
    $(xml).find("province[name='"+pname+"']>city").each(function(){ 
    var city = $(this).attr("name");//this-> 
    $("#sCity").append("<option>"+city+"</option>"); 
    }); 
    ///查找<city>下的所有第一级子元素(即区域) 
    var cname = $("#sCity").val(); 
    $(xml).find("city[name='"+cname+"']>area").each(function(){ 
    var area = $(this).attr("name");//this-> 
    $("#sArea").append("<option>"+area+"</option>"); 
    }); 
   } 
   }); 
  }); 
  //区 
  $("#sCity").change(function(){ 
   $("#sArea>option").remove(); 
   var cname = $("#sCity").val(); 
   $.ajax({url:"xml/City.xml", 
   success:function(xml){ 
    ///查找<city>下的所有第一级子元素(即区域) 
    $(xml).find("city[name='"+cname+"']>area").each(function(){ 
    var area = $(this).attr("name");//this-> 
    $("#sArea").append("<option>"+area+"</option>"); 
    }); 
   } 
   }); 
  }); 
 }); 
 </script> 
 </head> 
 <body> 
 <form id="form1"> 
 <div> 
 <select id="DropProvince" style="width:100px;"> 
  <option>请选择</option> 
 </select> 
 <select id="sCity" style="width:100px;"> 
  <option>请选择相应市</option> 
 </select> 
  <select id="sArea" style="width:100px;"> 
  <option>请选择相应区</option> 
 </select> 
 </div> 
 </form> 
 </body> 
</html>

效果图如下:

jquery读取xml文件实现省市县三级联动的方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
Jquery动态添加输入框的方法
May 29 #Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 #Javascript
js实现发送验证码后的倒计时功能
May 28 #Javascript
JS实现两表格里数据来回转移的方法
May 28 #Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 #Javascript
You might like
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP 读取和编写 XML
2014/11/19 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python实现飞机大战微信小游戏
2020/03/21 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
副护士长竞聘演讲稿
2014/04/30 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
环境保护标语
2014/06/20 职场文书
音乐学专业求职信
2014/07/22 职场文书
长城导游词
2015/01/30 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
如何在C++中调用Python
2021/05/21 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
vue+iview实现手机号分段输入框
2022/03/25 Vue.js