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

发布时间：2020-12-15 23:18:10 所属栏目：百科来源：网络整理

导读：本文主要介绍使用 Jquery+Ajax+xml，首先需要一个包含我国所有地图信息的xml文档。此处选用的xml文档(共1000多行)主要结构如下：制作对应的表单，根据设置选择省/市的动作: 地区三级联动菜单省: 市: 地区: 以下是JS代码行 "); }); } });}//网页加载显示省

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

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

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

地区三级联动菜单省: 市: 地区:

以下是JS代码行

"); }); }

  });
}
//网页加载显示省份信息  
$(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"&gt;-请选择-</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"&gt;-请选择-</option>');
  district.each(function(k,v){
    var nm = $(this).attr('Piecearea');
    var id = $(this).attr('PieceareaID');
    $('#district').append('<option value='+id+'>'+nm+'</option>');
  });
}</pre>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!