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用noConflict代替$的实现方法
Apr 12 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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
SONY SRF-M100的电路分析
2021/03/02 无线电
php表单转换textarea换行符的方法
2010/09/10 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
理解Javascript闭包
2013/11/01 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
django最快程序开发流程详解
2019/07/19 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
经济信息管理专业大学生求职信
2013/09/27 职场文书
中医药大学市场营销专业自荐信
2013/09/29 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
大学自荐信
2013/12/12 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
市场营销专业求职信
2014/06/17 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
红旗渠导游词
2015/02/09 职场文书