码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现市,县级联

时间:2014-12-01 12:50:09      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   on   div   log   

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实现市,县级联

标签:style   blog   io   ar   color   sp   on   div   log   

原文地址:http://www.cnblogs.com/qingmaple/p/4134704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!