xml java省市县三级联动_jquery读取xml文件实现省市县三级联动的方法

本文实例讲述了jquery读取xml文件实现省市县三级联动的方法。分享给大家供大家参考。具体如下：

页面代码如下：

My JSP 'city.jsp' starting page

$(document).ready(function(){

//省

$.ajax({url:"xml/City.xml",

success:function(xml){

$(xml).find("province").each(function(){

var t = $(this).attr("name");//this->

$("#DropProvince").append(""+t+"");

});

}

});

//市

$("#DropProvince").change(function(){

$("#sCity>option").remove();

$("#sArea>option").remove();

var pname = $("#DropProvince").val();

$.ajax({url:"xml/City.xml",

success:function(xml){

///查找下的所有第一级子元素(即城市)

$(xml).find("province[name='"+pname+"']>city").each(function(){

var city = $(this).attr("name");//this->

$("#sCity").append(""+city+"");

});

///查找下的所有第一级子元素(即区域)

var cname = $("#sCity").val();

$(xml).find("city[name='"+cname+"']>area").each(function(){

var area = $(this).attr("name");//this->

$("#sArea").append(""+area+"");

});

}

});

});

//区

$("#sCity").change(function(){

$("#sArea>option").remove();

var cname = $("#sCity").val();

$.ajax({url:"xml/City.xml",

success:function(xml){

///查找下的所有第一级子元素(即区域)

$(xml).find("city[name='"+cname+"']>area").each(function(){

var area = $(this).attr("name");//this->

$("#sArea").append(""+area+"");

});

}

});

});

});

请选择

请选择相应市

请选择相应区

效果图如下：

希望本文所述对大家的jQuery程序设计有所帮助。