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


Posted in jQuery onJune 09, 2017

本文主要介绍使用 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 异步操作之动态添加节点功能
May 24 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php自动加载方式集合
2016/04/04 PHP
php实现的双色球算法示例
2017/06/20 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
公司董事长职责
2013/12/12 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
承办会议欢迎词
2014/01/17 职场文书
五一口号
2014/06/19 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python