ajax+xml的城市三级联动

城市级联的Demo

Area. xml中的文件数据

<address>
<province name="北京市">
<city name="北京市">
<country name="东城区"/>
<country name="西城区"/>
<country name="崇文区"/>
</city>
</province>
<province name="上海市">
<city name="上海市">
<country name="黄浦区"/>
<country name="卢湾区"/>
<country name="徐汇区"/>
</city>
</province>
</address>

ajax代码

    <script type="text/javascript">
    $(function () {
     //加载省份列表信息
     $.ajax({
         //url:请求地址
         url:"Area.xml",
         //dataType:数据类型
         dataType: "xml",
         //success:成功后的回调函数
         success: function (data) {
            //找到(province)省份节点;
            $(data).find("province").each(function () { 
                //加载(province)省份信息到列表中                                                 
                $("<option></option>").html($(this).attr("name")).appendTo("#SelProvince");             
            })
         },
         error:function(jqXHR, textStatus, errorMsg){
            alert(jqXHR+" + "+textStatus+" + "+errorMsg);
         }
     })
     //省份列表信息更改时，加载城市列表信息
     $("#SelProvince").change(function () {
         //省份值;
         var value = $("#SelProvince").val();                                                            
         if (value != "请选择") {
             //显示城市下拉列表框删除城市下拉列表中的数据;
             $("#SelCity").find("option").remove();
             //加载城市列表中的请选择;                              
             $("#SelCity").html("<option>请选择</option>");
             //删除地区下拉列表中的数据;                                              
             $("#SelArea").find("option").remove(); 
             //加载地区列表中的请选择;                                                     
             $("#SelArea").html("<option>请选择</option>")                                               
             $.ajax({
                 url: "Area.xml",
                 dataType: "xml",
                 success: function (xml) {
                     //根据省份name属性得到子节点City节点name属性;
                     $(xml).find("[name='" + value + "']").find("city").each(function () {
                     //加载City(城市)信息到下拉列表中;               
                     $("<option></option>").html($(this).attr("name")).appendTo("#SelCity"); 
                     、  

                     //select的name值等于pojo类的某属性名，会自动赋值吗？
                     //在xml重添加判断，如果等于某个属性名，就**列名=#{第二个select的值}    
                     })
                 }
             })
         }
     })
     //城市列表信息改变时，加载地区列表信息
     $("#SelCity").change(function () {
         //城市值;
         var value = $("#SelCity").val();                                                                
         if (value != "请选择") {
             //显示地区下拉列表框删除地区下拉列表中的数据;
             $("#SelArea").find("option").remove();
             //加载地区列表中的请选择;                              
             $("#SelArea").html("<option>请选择</option>");                                              
             $.ajax({
                 url: "Area.xml",
                 dataType: "xml",
                 success: function (xml) {
                     //根据城市节点name得到子节点Area节点name属性;
                     $(xml).find("[name='" + value + "']").find("country").each(function () { 
                     //加载到Area(地区)下拉列表中;           
                     $("<option></option>").html($(this).attr("name")).appendTo("#SelArea");         
                     })
                 }
             })
         }
     })
 });
    </script>
  </head>

下拉框

<table style="border: 1px solid gray">
         <tr>
             <td align="center" style="width: 130px;">
                 <select id="SelProvince" style="width: 100px;">
                     <option>请选择</option>
                 </select>
             </td>
             <td align="center" style="width: 130px;">
                 <select id="SelCity" style="width: 100px; margin-left: 10px;">
                     <option>请选择</option>
                 </select>
             </td>
             <td align="center" style="width: 130px;">
                 <select id="SelArea" style="width: 100px; margin-left: 10px;">
                     <option>请选择</option>
                 </select>
             </td>
         </tr>
     </table>