编程 Javascript

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程序设计有所帮助。

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

- Author -

wo_soul

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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