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

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

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

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

地区三级联动菜单

省:-请选择-

市:-请选择-

地区:-请选择-

以下是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(""+nm+"");

});

}

});

}

//网页加载显示省份信息

$(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('-请选择-');

//遍历追加县市

city.each(function(k,v){

var nm = $(this).attr('City');

var id = $(this).attr('CityID');

$('#city').append(''+nm+'');

});

}

//以下函数的逻辑与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('-请选择-');

district.each(function(k,v){

var nm = $(this).attr('Piecearea');

var id = $(this).attr('PieceareaID');

$('#district').append(''+nm+'');

});

}

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