Jquery+Ajax+XML实现国家、省、市的三级联动

来源：互联网发布：淘宝号如何快速上心编辑：程序博客网时间：2024/04/30 04:33
Jquery+Ajax+XML实现国家、省、市的三级联动html页面：<tr><td>所在国家：<select name="sCountry" id="sCountry"></select></td></tr><tr><td>所在地区：<select name="sProvince" id="sProvince"></select><select name="sCity" id="sCity"></select></td></tr>xml文件：附：这个地区 可以拿到腾讯的省份城市。在QQ安装的盘中，默认地址：C:\Program Files\Tencent\QQ\I18N\2052\LocList     <?xml version="1.0" encoding="utf-8"?> <Location>   <Country Name="中国" Code="1">     <Provinces Name="北京" Code="1">       <City Name="东城" Code="1"/>       <City Name="西城" Code="2"/>       <City Name="崇文" Code="3"/>       <City Name="宣武" Code="4"/>       <City Name="朝阳" Code="5"/>       <City Name="丰台" Code="6"/>       <City Name="石景山" Code="7"/>       <City Name="海淀" Code="8"/>       <City Name="门头沟" Code="9"/>       <City Name="房山" Code="11"/>       <City Name="通州" Code="12"/>       <City Name="顺义" Code="13"/>       <City Name="昌平" Code="14"/>       <City Name="大兴" Code="15"/>       <City Name="怀柔" Code="16"/>       <City Name="平谷" Code="17"/>       <City Name="密云" Code="18"/>       <City Name="延庆" Code="19"/>     </Provinces>     <Provinces Name="天津" Code="2">       <City Name="和平" Code="1"/>       <City Name="河东" Code="2"/>       <City Name="河西" Code="3"/>       <City Name="南开" Code="4"/>       <City Name="河北" Code="5"/>       <City Name="红桥" Code="6"/>       <City Name="塘沽" Code="7"/>       <City Name="汉沽" Code="8"/>       <City Name="大港" Code="9"/>       <City Name="东丽" Code="10"/>       <City Name="西青" Code="11"/>        <!-- 以下省略 -->js文件：var jqShow=jQuery.noConflict();　　先说明上面这句话，项目中用JQuery的$选择器时会提示找不到这个符号，应该是冲突了，所以我用jsShow来代替$jqShow(function(){                 jqShow("#sCountry").append("<option value='0'>请选择..</option>");                 jqShow("#sProvince").append("<option value='0'>请选择..</option>");                 jqShow("#sCity").append("<option value='0'>请选择..</option>");             })　　页面加载时先给省、市赋值复制代码//页面加载时先显示国家              jqShow.ajax({                 url:"http://www.cnblogs.com/XML/world.xml",                 datatype:"xml",                 type:"GET",                 success:function(xmldoc){                     var valueList = jqShow(xmldoc).find("Country");                     jqShow(valueList).each(function(){                         jqShow("#sCountry").append("<option value='"+jqShow(this).attr("Code")+"'>"+jqShow(this).attr("Name")+"</option>");                     })                 }             })            复制代码//国家改变时             jqShow(function(){                 jqShow("#sCountry").change(function(){                          if(jqShow(this).val() == "0")                         {                             jqShow("#sProvince").find("option").remove();                             jqShow("#sProvince").append("<option value='0'>请选择..</option>");                             jqShow("#sCity").find("option").remove();                             jqShow("#sCity").append("<option value='0'>请选择..</option>");                         }else                         {                             jqShow("#sProvince").find("option").remove();                             jqShow("#sProvince").append("<option value='0'>请选择..</option>");                             jqShow("#sCity").find("option").remove();                             jqShow("#sCity").append("<option value='0'>请选择..</option>");                                                           var selectvalue = jqShow(this).val(); //得到选中国家的value                             jqShow.ajax({                             url:"http://www.cnblogs.com/XML/world.xml",                             type:"get",                             datatype:"xml",                             success:function(xml){                                 var xmldoc = xml;                                 jqShow(xmldoc).find("Location>Country[Code="+selectvalue+"]").each(function(){                                     jqShow(this).find("Provinces").each(function(){ //得到国家下所有的省                                         jqShow("#sProvince").append("<option value='"+jqShow(this).attr("Code")+"'>"+jqShow(this).attr("Name")+"</option>");                                     })                                 })                             }                         })                      }                 })             })　　//省份改变后             jqShow(function(){                 jqShow("#sProvince").change(function(){                     if(jqShow(this).val() == "0"){                         jqShow("#sCity").find("option").remove();                         jqShow("#sCity").append("<option value='0'>请选择..</option>");                     }                     else                     {                         var selectvalue = jqShow(this).val();                         var countryvalue = jqShow("#sCountry").val();                     jqShow.ajax({                         url:"http://www.cnblogs.com/XML/world.xml",                         type:"get",                         datatype:"xml",                         success:function(xmldoc){                             jqShow("#sCity").find("option").remove();                             jqShow(xmldoc).find("Location>Country[Code="+countryvalue+"]>Provinces[Code="+selectvalue+"]").each(function(){                                 jqShow(this).find("City").each(function(){                                     jqShow("#sCity").append("<option value='"+jqShow(this).attr("Code")+"'>"+jqShow(this).attr("Name")+"</option>");                                 })                             })                         }                      })                     }               })             })
原文：http://www.cnblogs.com/New-world/archive/2012/10/22/2734189.html
0 0