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

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


  • 相关阅读:
    [原]OS X 10.9 Mavericks
    [原]iOS Makefile Template
    [原]Escape From the iOS Sanbox on Jailbreak Device
    串->串的表示和实现
    队列->队列的应用(银行业务模拟)
    队列->队列的表示和实现
    栈->栈与递归
    栈->栈的应用
    栈->栈的基本定义
    线性表->应用->一元多项式
  • 原文地址:https://www.cnblogs.com/qingmaple/p/4134704.html
Copyright © 2011-2022 走看看