爱4妮 jQuery + Ajax + json 级联省市县级联

$(function (){

var sf = $(".carname").children("select");
var cy = $(".cartype").children("select");
var dx = $(".wheeltype").children("select");
var carimg = $(".carimg");
sf.change(function (){
var pid =$(this).val();

carimg.hide();
dx.parent().hide();
//省份不为空
if(pid !=""){
$.get("http://domain:8080/test/CardServlet?method=getcity&pids="+pid,function (data)
{

if(data.length !=0)
{
cy.html("");

$("<option value=''>请选择城市</option>").appendTo(cy);

$.each(data,function(index,city)
{
$("<option value='"+city.cid+"'>" +city.cname + "</option>").appendTo(cy);
});
cy.parent().show();
sf.next().show();
}
},"json");
}
//省份为空
else{
cy.parent().hide();
sf.next().hide();
}
});

//城市下拉框
cy.change(function (){

var cid =$(this).val();

dx.parent().show();
carimg.hide();
//城市不为空
if(cid !=""){

$.get("http://domain:8080/test/CardServlet?method=getarea&cids="+cid,function (data)
{

if(data.length !=0)
{
dx.html("");

$("<option value=''>请选择地区</option>").appendTo(dx);

$.each(data,function(index,aper)
{
$("<option value='"+aper.aid+"' >" +aper.aname + "</option>").appendTo(dx);
});
dx.parent().show();
cy.next().show();
}	else{
dx.parent().hide();
cy.next().hide();
}
},"json");
}
//省份为空
else{
dx.parent().hide();
cy.next().hide();
}
});

dx.change(function(){
var dqm = $(this).val();
//2.根据省份 城市 地区 获得 图片的文件名
var sfm = sf.val();
var csm = cy.val();
var carimgname =sfm+csm+dqm+".jpg";
alert( carimgname);
carimg.hide();
$(".carloading").show();
//4.通过Javascript中的Image对象预装载图片
var cacheimg = new Image();
$(cacheimg).attr("src","images/" + carimgname).load(function(){
//隐藏loading图片
$(".carloading").hide();
//显示图片
carimg.attr("src","images/" + carimgname).show();
});

});

//给数据装载中的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});

});

</script>