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

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