jquery版本:1.2.6,传说jquery1.3异步加载会出现卡的情况。
js内容:
var j = jQuery.noConflict();
var prov="";
var city="";
var area="";
j(function(){
j.get("/Js/Message/address.xml",function(xml){
j("body").data("xml",xml);
j("#province_city_area").append("<select id='_province'></select> <select id='_city'></select><select id='_area'></select>");
j("province",xml).each(function(){
if(j(this).attr("province")==prov)
j("#_province").append("<option value="+j(this).attr("provinceID")+" selected>"+j(this).attr("province")+"</option>");
else
j("#_province").append("<option value="+j(this).attr("provinceID")+">"+j(this).attr("province")+"</option>");
});//初始省
LoadCity(j("#_province").val().substr(0,3),xml); //初始市
LoadArea(j("#_city").val().substr(0,4),xml); //初始区
j("#_province").change(function(){
j("#_city").empty();
var Pvalue = j(this).val().substr(0,3);
if(j("province[provinceID^="+Pvalue+"] City",xml).length==0){
j("#_city").hide();
j("#_area").remove();
return;
}else
j("#_city").show();
LoadCity(Pvalue,xml);
LoadArea(j("#_city").val().substr(0,4),xml);
});
j("#_city").change(function(){
LoadArea(j(this).val().substr(0,4),xml);
});
}
);
function LoadCity(Pvalue,xml){
j("#_city").empty();
j("province[provinceID^="+Pvalue+"] City",xml).each(function(){
if(j(this).attr("City")==city)
j("#_city").append("<option value="+j(this).attr("CityID")+" selected>"+j(this).attr("City")+"</option>");
else
j("#_city").append("<option value="+j(this).attr("CityID")+">"+j(this).attr("City")+"</option>");
});
}
function LoadArea(Cvalue,xml){
j("#_area").remove();
j("#_city").after(" <select id=_area></select>");
j("City[CityID^="+Cvalue+"] Piecearea",xml).each(function(){
if(j(this).attr("Piecearea")==area)
j("#_area").append("<option selected>"+j(this).attr("Piecearea")+"</option>");
else
j("#_area").append("<option>"+j(this).attr("Piecearea")+"</option>");
});
}
});
j.extend({
Jprov: function(provalue){
if(provalue==null)
return j("#_province option:selected").text();
else{
prov = provalue;
j("#_province option").each(function(){
if(j(this).text()==provalue){
j(this).attr("selected",true);
j("#_province").trigger("change");
}
});
}
},
Jcity: function(cityvalue){
if(cityvalue==null)
return j("#_city option:selected").text();
else{
city = cityvalue;
j("#_city option").each(function(){
if(j(this).text()==cityvalue){
j(this).attr("selected",true);
j("#_city").trigger("change");
}
});
}
},
Jarea: function(areavalue){
if(areavalue==null)
return j("#_area option:selected").text();
else{
area = areavalue;
j("#_area option").each(function(){
if(j(this).text()==areavalue){
j(this).attr("selected",true);
}
});
}
}
});
html代码:
<div id="province_city_area"></div>
调用:
取值:
j.Jprov();
j.Jcity();
j.Jarea();
赋值:
j.Jprov("广东省");
j.Jcity("深圳市");
j.Jarea("宝安区");