首页 > 代码库 > jquery实现市,县级联

jquery实现市,县级联

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>

 

jquery实现市,县级联