$(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>
爱4妮 jQuery + Ajax + json 级联省市县级联
最新推荐文章于 2022-03-05 21:08:16 发布