沈阳市网站建设哪里的公司比较好/汨罗网站seo

jquery+ajax+xml,实现地区三级联动，运行速度快，性能要比连接mysql要高很多，而且比连接mysql操作更简单，方便，高效!

HTML:

地区三级联动

省份：

-请选择-

城市：

-请选择-

地区：-请选择-

Jquery:

var xmldom = null; //声明一个全局变量，用于存储第一次请求回来的xml信息

//获取并显示省份

function showprovince(){

//① ajax去服务器端获得xml文件里边的省份信息

$.ajax({

url:'./ChinaArea.xml',

//data:,

dataType:'xml',  //调用responseXML

type:'get',

success:function(msg){

xmldom = msg; //把请求回来的xml信息赋予给xmldom一份

//alert(msg);//object XMLDocument

var pros = $(msg).find('province');//在msg里边获得province元素节点对象

//遍历省份信息出来 pros是jquery对象

pros.each(function(k,v){

var nm = $(this).attr('province'); //省份名称

var id = $(this).attr('provinceID'); //省份id

$('#province').append(""+nm+"");

});

}

});

//② jquery解析xml并显示

}

$(function(){

//页面加载完毕就显示省份

showprovince();

});

function showcity(){

//根据选中的省份显示对应的城市

//① 获得被选中的省份的value属性值

var pid = $('#province option:selected').val();

//② 在xml文档中获得province节点(xml的province节点)，其属性provinceID="pid"

//   (xml文档内容"不发生变化"，其不适合做频繁的请求，带宽、服务器资源、用户等待时间有损耗)

var xml_province = $(xmldom).find('province[provinceID='+pid+']');

//③ 在xml_province(jquery对象)里边获得子节点City

var citys = xml_province.find('City');

//④ 遍历citys，并在页面上显示

$('#city').empty(); //先清除已经显示的节点

$('#city').append('-请选择-');

citys.each(function(){

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

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

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

});

}

function showaddre(){

var pid = $('#city option:selected').val();

var xml_province = $(xmldom).find('City[CityID='+pid+']');

var Piecearea = xml_province.find('Piecearea');

$('#diqu').empty(); //先清除已经显示的节点

$('#diqu').append('-请选择-');

Piecearea.each(function(){

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

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

$('#diqu').append(""+nm+"");

});

}

ChinaArea.xml文件：