zoukankan      html  css  js  c++  java
  • 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=" 185px;">
    2                                     <option>请选择城市</option>
    3                                 </select>
    4 
    5 <select id="area" name="model.qx" style=" 185px;">
    6                                     <option>请选择相应区县</option>
    7                                 </select>

     如果想页面加载完后就选中某个选项,option判断value值,selected

    有问题在公众号【清汤袭人】找我,时常冒出各种傻问题,然一通百通,其乐无穷,一起探讨


  • 相关阅读:
    Codefores 506A Mr. Kitayuta, the Treasure Hunter( DP && dfs )
    Goals ? Ideals ?
    HDU 5159 Card( 计数 期望 )
    HDU 1387 Team Queue( 单向链表 )
    HDU 1709 The Balance( DP )
    HDU 2152 Fruit( DP )
    HDU 1398 Square Coins(DP)
    HDU 5155 Harry And Magic Box( DP )
    HDU 3571 N-dimensional Sphere( 高斯消元+ 同余 )
    最大连续自序列
  • 原文地址:https://www.cnblogs.com/qingmaple/p/4134704.html
Copyright © 2011-2022 走看看