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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
javascript arguments使用示例
2014/12/16 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
物业门卫岗位职责
2013/12/28 职场文书
工作态度检讨书
2014/02/11 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2015年路政工作总结
2015/05/22 职场文书
2015国庆节感想
2015/08/04 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Android存储中最基本的文件存储方式
2022/04/30 Java/Android