jquery读取xml文件实现省市县三级联动 |
您所在的位置：网站首页 › 省市县三级联动下拉列表 › jquery读取xml文件实现省市县三级联动 |
jquery读取xml文件实现省市县三级联动
|
jsp页面代码：（City.xml文件） 1 2 6 7DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 9 10 11 12 My JSP 'city.jsp' starting page 13 14 15 16 17 18 19 22 23 24 25 26 27 $(document).ready(function(){ 28 //省 29 $.ajax({url:"xml/City.xml", 30 success:function(xml){ 31 $(xml).find("province").each(function(){ 32 var t = $(this).attr("name");//this-> 33 $("#DropProvince").append(""+t+""); 34 }); 35 } 36 }); 37 38 //市 39 $("#DropProvince").change(function(){ 40 $("#sCity>option").remove(); 41 $("#sArea>option").remove(); 42 var pname = $("#DropProvince").val(); 43 44 $.ajax({url:"xml/City.xml", 45 success:function(xml){ 46 ///查找下的所有第一级子元素(即城市) 47 $(xml).find("province[name='"+pname+"']>city").each(function(){ 48 var city = $(this).attr("name");//this-> 49 $("#sCity").append(""+city+""); 50 }); 51 52 ///查找下的所有第一级子元素(即区域) 53 var cname = $("#sCity").val(); 54 $(xml).find("city[name='"+cname+"']>area").each(function(){ 55 var area = $(this).attr("name");//this-> 56 $("#sArea").append(""+area+""); 57 }); 58 } 59 }); 60 }); 61 62 //区 63 $("#sCity").change(function(){ 64 $("#sArea>option").remove(); 65 var cname = $("#sCity").val(); 66 67 $.ajax({url:"xml/City.xml", 68 success:function(xml){ 69 ///查找下的所有第一级子元素(即区域) 70 $(xml).find("city[name='"+cname+"']>area").each(function(){ 71 var area = $(this).attr("name");//this-> 72 $("#sArea").append(""+area+""); 73 }); 74 } 75 }); 76 }); 77 78 }); 79 80 81 82 83 84 85 86 87 88 请选择 89 90 91 请选择相应市 92 93 94 请选择相应区 95 96 97 98 99 100 101 1效果图： 2
|
【本文地址】
今日新闻 |
推荐新闻 |