jquery实现市，县级联

浏览数：32 / 时间：2015年06月09日

1，在webroot下面，xml/address.xml

<?xml version="1.0" encoding="UTF-8"?>
<citys>
    <city name="南昌市">
        <area>昌北区</area>
        <area>东湖区</area>
        <area>西湖区</area>
        <area>青云谱区</area>
        <area>湾里区</area>
        <area>昌东区</area>
        <area>红谷滩区</area>
        <area>青山湖区</area>
        <area>南昌县</area>
        <area>新建县</area>
        <area>安义县</area>
        <area>进贤县</area>
    </city>
    <city name="景德镇市">
        <area>昌江区</area>
        <area>珠山区</area>
        <area>浮梁县</area>
        <area>乐平市</area>
    </city>
</citys>

2,jsp页面

$(document).ready(function(){
    //查找所有的城市
     $.ajax({url:"<%=path%>/xml/address.xml",
          success:function(xml){
             $(xml).find("city").each(function(){
                  var t = $(this).attr("name");//city节点的name属性
                  $("#city").append("<option>"+t+"</option>");
             });
          }
     });
   
     //区，            城 市变化时，查找对应的区县
     $("#city").change(function(){
             $("#area>option").remove();
             var cname = $("#city").val();
             
             $.ajax({url:"<%=path%>/xml/address.xml",
                 success:function(xml){
                  ///查找<city>下的所有第一级子元素(即区域)
                     $(xml).find("city[name=‘"+cname+"‘]>area").each(function(){
                         var area = $(this).text();//area标签的内容
                         $("#area").append("<option>"+area+"</option>");
                     });
                 }
             });
     });
            
            
            
});

页面

1 <select id="city" name="model.cs" style="width: 185px;">
2                                     <option>请选择城市</option>
3                                 </select>
4 
5 <select id="area" name="model.qx" style="width: 185px;">
6                                     <option>请选择相应区县</option>
7                                 </select>