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

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


  • 相关阅读:
    Razor使用Parse()时最好指定“缓存名”
    脱离MVC使用Razor模板引擎
    ASP.NET内核几大对象、ASP.NET核心知识(6)
    一般处理程序、ASP.NET核心知识(5)
    WebApplication和WebSite的区别
    写一个简易web服务器、ASP.NET核心知识(4)
    JQuery的链式编程,隐式迭代是啥意思?
    JQuery选择器
    JQuery的几个基础操作
    写一个简易浏览器、ASP.NET核心知识(3)
  • 原文地址:https://www.cnblogs.com/qingmaple/p/4134704.html
Copyright © 2011-2022 走看看