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文件：

<?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>");
                                 })
                             })
                         }
                      })
                     }
               })
             })