程序博客网 > 开源商城 java app

Jquery ajax下拉框联动（用xml存放数据）

来源：互联网 发布：开源商城 java app 编辑：程序博客网 时间：2024/05/29 09:12

demo.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <html>  
  3. <head>  
  4. <title>jquery xml解析</title>  
  5. <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
  6. <script type="text/javascript">  
  7.     $(document).ready(  
  8.             function() {  
  9.                 $.ajax( {  
  10.                     url : "xx.xml",  
  11.                     success : function(xml) {  
  12.                         $(xml).find("province").each(function() {  
  13.                             var t = $(this).attr("name");//this->     
  14.                                 $("#DropProvince").append(  
  15.                                         "<option>" + t + "</option>");  
  16.                             });  
  17.                     }  
  18.                 });  
  19.                 $("#DropProvince").change(  
  20.                         function() {  
  21.                             $("#sCity>option").remove();  
  22.                             var pname = $("#DropProvince").val();  
  23.                             $.ajax( {  
  24.                                 url : "xx.xml",  
  25.                                 success : function(xml) {  
  26.                                     $(xml).find(  
  27.                                             "province[name='" + pname  
  28.                                                     + "']>city").each(  
  29.                                             function() {  
  30.                                                 $("#sCity").append(  
  31.                                                         "<option>"  
  32.                                                                 + $(this)  
  33.                                                                         .text()  
  34.                                                                 + "</option>");  
  35.                                             });  
  36.                                 }  
  37.                             });  
  38.                         });  
  39.             });  
  40. </script>  
  41. </head>  
  42. <body>  
  43. <form id="form1">  
  44. <div>  
  45.     <select id="DropProvince" style="width: 60px;">  
  46.         <option>请选择</option>  
  47.     </select>  
  48.     <select id="sCity" style="width: 60px;">  
  49.     </select>  
  50. </div>  
  51. </form>  
  52. </body> 
  53. </html>
  54. xx.xml

  56. <?xml version="1.0" encoding="utf-8" ?>    
  57. <provinces>    
  58.     <province name="湖北">    
  59.         <city>武汉</city>    
  60.         <city>黄石</city>    
  61.         <city>宜昌</city>    
  62.         <city>天门</city>    
  63.     </province>    
  64.     <province name="湖南">    
  65.         <city>邵阳</city>    
  66.         <city>长沙</city>    
  67.         <city>岳阳</city>    
  68.     </province>    
  69.     <province name="广东">    
  70.         <city>广州</city>    
  71.         <city>深圳</city>    
  72.     </province>    
  73. </provinces> 
开源商城 java app 开源商城 java app
原创粉丝点击
热门IT博客
tia博途软件v13tia博途软件v13
逆战一键瞬狙软件逆战一键瞬狙软件
stc89le52rc数据手册
温州网络瘫痪
微信h5支付教程java
java手机游戏安装包
JS submit 重复提交
c语言getchar和scanf
windows 2003server
电脑的软件管家
程序员求职网
美工的素材网站
聚美和淘宝哪个好
行书毛笔字知乎
街头篮球刷数据
数据迁移工具有哪些
好看的演唱会 知乎
银翼杀手剧情解析 知乎
百度java开发工程师
数据库手机号码类型
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 天津师范大学津沽学院宿舍 天津师范大学津沽学院吧 天津师范大学津沽学院毕业证 天津师范大学津沽学院招生网 津津 津津豆腐干 津港 津港高速公路 津港定制专线 夏津信息港 津港高速 水岛津田 津田油烟机 津田 生育津贴 购物津贴 津贴 双十一津贴 淘宝津贴 津贴补贴 生育津贴领取条件 生育津贴怎么算 生育津贴多久能报下来 高温津贴发放标准 购物津贴怎么用 淘宝购物津贴 28省份高温津贴发放标准 生育津贴报销 淘宝购物津贴怎么用 津贴是什么意思 生育津贴怎么领 广州生育津贴 12333生育津贴查询系统 生育津贴计算公式 淘宝购物津贴在哪里领 粉象vip管理津贴 生育津贴领取查询系统 双11购物津贴怎么用 2018生育津贴计算公式 生育津贴什么时候申请 深圳生育津贴

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里