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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
原生js实现each方法实例代码详解
May 27 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代码审核的详细介绍
2013/06/13 PHP
PHP使用递归生成文章树
2015/04/21 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
HTML的select控件美化
2017/03/27 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
介绍Python中的__future__模块
2015/04/27 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
毕业学生推荐信
2013/12/01 职场文书
个人承诺书
2014/03/26 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
学习心得体会
2019/06/20 职场文书
2019大学生实习报告
2019/06/21 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript