Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

本文主要介绍使用 Jquery+Ajax+xml，首先需要一个包含我国所有地图信息的xml文档。

此处选用的xml文档(共1000多行)主要结构如下：

<?xml version="1.0" encoding="utf-8"?>
<area Country="China">
 <province ID="1" provinceID="110000" province="北京市">
  <City CityID="110100" City="市辖区">
   <Piecearea PieceareaID="110101" Piecearea="东城区" />
   <Piecearea PieceareaID="110102" Piecearea="西城区" />
   <Piecearea PieceareaID="110103" Piecearea="崇文区" />
   <Piecearea PieceareaID="110104" Piecearea="宣武区" />
   <Piecearea PieceareaID="110105" Piecearea="朝阳区" />
   <Piecearea PieceareaID="110106" Piecearea="丰台区" />
   <Piecearea PieceareaID="110107" Piecearea="石景山区" />
   <Piecearea PieceareaID="110108" Piecearea="海淀区" />
   <Piecearea PieceareaID="110109" Piecearea="门头沟区" />
   <Piecearea PieceareaID="110111" Piecearea="房山区" />
   <Piecearea PieceareaID="110112" Piecearea="通州区" />
   <Piecearea PieceareaID="110113" Piecearea="顺义区" />
   <Piecearea PieceareaID="110114" Piecearea="昌平区" />
   <Piecearea PieceareaID="110115" Piecearea="大兴区" />
   <Piecearea PieceareaID="110116" Piecearea="怀柔区" />
   <Piecearea PieceareaID="110117" Piecearea="平谷区" />
  </City>
<province>

制作对应的表单，根据设置选择省/市的动作:

<h2>地区三级联动菜单</h2>
  省:<select id="province" onchange="showcity()"><option value="0">-请选择-</option></select>
  市:<select id="city" onchange="showdistrict()"><option value="0">-请选择-</option></select>
  地区:<select id="district"><option value="0">-请选择-</option></select>

以下是JS代码行

//声明一个全局变量，用于存储第一次请求的xml信息,避免后续多次频繁请求xml
    var xmldom =null;
    //获取并显示省份信息
    function showprovince(){
      //使用ajax去服务器获得xml文件里面的省份信息
      $.ajax({
        url:'./ChinaArea.xml',
        //data:
        dataType:'xml',//相当于调用responseXML
        type:'get',
        success:function(msg){
          //将返回的xml信息赋予xmldom
          xmldom = msg;
          //获得province 元素节点对象
          var prov = $(msg).find('province');
          //遍历省份信息
          prov.each(function(k,v){
            var nm = $(this).attr('province');
            var id = $(this).attr('provinceID');
            //追加到指定的节点
            $('#province').append("<option value="+id+">"+nm+"</option>");
          });
        }

      });
    }
    //网页加载显示省份信息  
    $(function(){
      showprovince();
    });
    function showcity(){
      //获取 省份 的id
      var pid = $('#province option:selected').val();
      //根据xmldom信息 找到指定的省份节点
      var xml_province = $(xmldom).find('province[provinceID='+pid+']');
      // 获取对应所有县市节点
      var city = $(xml_province).find('City');
      //在遍历追加前，先清空此前已经显示的信息
      $('#city').empty();
      $('#city').append('<option value="0">-请选择-</option>');
      //遍历追加县市
      city.each(function(k,v){
        var nm = $(this).attr('City');
        var id = $(this).attr('CityID');
        $('#city').append('<option value='+id+'>'+nm+'</option>');
      });
    }
    //以下函数的逻辑与showcity()的逻辑一致
    function showdistrict(){
      //获取 县市 的id
      var cid = $('#city option:selected').val();
      //根据xmldom信息 找到指定的县市节点
      var xml_city = $(xmldom).find('City[CityID='+cid+']');
      // 获取对应所有地区节点
      var district = $(xml_city).find('Piecearea');
      $('#district').empty();
      $('#district').append('<option value="0">-请选择-</option>');
      district.each(function(k,v){
        var nm = $(this).attr('Piecearea');
        var id = $(this).attr('PieceareaID');
        $('#district').append('<option value='+id+'>'+nm+'</option>');
      });
    }

以上这篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# jquery  # 地区三级联动  # jquery+ajax实现省市区三级联动效果简单示例  # jQuery实现的省市县三级联动菜单效果完整实例  # 基于jQuery+JSON的省市二三级联动效果  # 中国地区三级联动下拉菜单效果分析  # jquery读取xml文件实现省市县三级联动的方法  # jQuery ajax实现省市县三级联动  # 省市区三级联动jquery实现代码  # 请选择  # 遍历  # 县市  # 给大家  # 门头沟区  # 平谷区  # 怀柔区  # 房山区  # 石景山区  # 顺义区  # 大兴区  # 通州区  # 昌平区  # 宣武区  # 崇文区  # 丰台区  # 西城区  # 东城区  # 文档  # 朝阳区 

相关文章： nginx修改上传文件大小限制的方法  如何快速生成可下载的建站源码工具？  太原网站制作公司有哪些,网约车营运证查询官网？  如何在西部数码注册域名并快速搭建网站？  如何在Tomcat中配置并部署网站项目？  高防服务器租用如何选择配置与防御等级？  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  电商网站制作价格怎么算,网上拍卖流程以及规则？  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  定制建站是什么？如何实现个性化需求？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  c++怎么用jemalloc c++替换默认内存分配器【性能】  网站制作费用多少钱,一个网站的运营，需要哪些费用？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  网站制作说明怎么写,简述网页设计的流程并说明原因？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  如何解决ASP生成WAP建站中文乱码问题？  相册网站制作软件,图片上的网址怎么复制？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  如何在云服务器上快速搭建个人网站？  c# 在高并发场景下，委托和接口调用的性能对比  个人摄影网站制作流程,摄影爱好者都去什么网站？  如何挑选高效建站主机与优质域名？  建站主机选购指南与交易推荐：核心配置解析  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  建站之星如何配置系统实现高效建站？  已有域名和空间如何快速搭建网站？  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  建站之星ASP如何实现CMS高效搭建与安全管理？  黑客如何通过漏洞一步步攻陷网站服务器？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  建站之星logo尺寸如何设置最合适？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  微信小程序 input输入框控件详解及实例（多种示例）  代购小票制作网站有哪些,购物小票的简要说明？  平台云上自助建站如何快速打造专业网站？  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  如何高效完成自助建站业务培训？  如何高效利用亚马逊云主机搭建企业网站？  如何注册花生壳免费域名并搭建个人网站？  如何基于PHP生成高效IDC网络公司建站源码？  实惠建站价格推荐：2025年高性价比自助建站套餐解析  常州企业建站如何选择最佳模板？  如何在七牛云存储上搭建网站并设置自定义域名？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  怎么将XML数据可视化 D3.js加载XML