级联下拉框效果，动态加载图片
生活随笔
收集整理的這篇文章主要介紹了
级联下拉框效果，动态加载图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>JQuery實例-級聯下拉框效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/chainselect.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/chainselect.js"></script></head><body><div class="loading"><p><img src="images/data-loading.gif" alt="數據裝載中" /></p><p>數據裝載中......</p></div><div class="car"><span class="carname">汽車廠商:<select><option value="" selected="selected">請選擇汽車廠商</option><option value="BMW">寶馬</option><option value="Audi">奧迪</option><option value="VW">大眾</option></select><img src="images/pfeil.gif" alt="有數據" /></span><span class="cartype">汽車類型:<select></select><img src="images/pfeil.gif" alt="有數據" /></span><span class="wheeltype">車輪類型：<select></select></span></div><div class="carimage"><p><img src="images/img-loading.gif" alt="圖片裝載中" class="carloading" /></p><p><img src="" alt="汽車圖片" class="carimg"/></p></div></body>
</html> $(document).ready(function(){//找到三個下拉框var carnameSelect = $(".carname").children("select");var cartypeSelect = $(".cartype").children("select");var wheeltypeSelect = $(".wheeltype").children("select");var carimg = $(".carimg");//給三個下拉框注冊事件
carnameSelect.change(function(){//1.需要獲得當前下拉框的值var carnameValue = $(this).val();//1.1只要第一個下拉框內容有變化，第三個下拉框都要先隱藏起來
wheeltypeSelect.parent().hide();//1.2將汽車圖片隱藏起來carimg.hide().attr("src","");//2.如果值不為空，則將下拉框的值傳送給服務器if (carnameValue != "") {if (!carnameSelect.data(carnameValue)) {$.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){//2.1接收服務器返回的汽車類型if (data.length != 0) {//2.2解析汽車類型的數據，填充到汽車類型的下拉框中cartypeSelect.html("");$("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect);for (var i = 0; i < data.length; i++) {$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);}//2.2.1汽車類型的下拉框顯示出
cartypeSelect.parent().show();//2.2.2第一個下拉框后面的指示圖片顯示出來
carnameSelect.next().show();} else {//2.3沒有任何汽車類型的數據
cartypeSelect.parent().hide();carnameSelect.next().hide();}carnameSelect.data(carnameValue, data);}, "json");} else {var data = carnameSelect.data(carnameValue);//2.1接收服務器返回的汽車類型if (data.length != 0) {//2.2解析汽車類型的數據，填充到汽車類型的下拉框中cartypeSelect.html("");$("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect);for (var i = 0; i < data.length; i++) {$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);}//2.2.1汽車類型的下拉框顯示出
cartypeSelect.parent().show();//2.2.2第一個下拉框后面的指示圖片顯示出來
carnameSelect.next().show();} else {//2.3沒有任何汽車類型的數據
cartypeSelect.parent().hide();carnameSelect.next().hide();}}} else {//3.如果值為空，那么第二個下拉框所在span要隱藏起來，第一個下拉框后面的指示圖片也要隱藏
cartypeSelect.parent().hide();carnameSelect.next().hide();}});cartypeSelect.change(function(){//1.需要獲得當前下拉框的值var cartypeValue = $(this).val();//1.1將汽車圖片隱藏起來carimg.hide().attr("src","");//2.如果值不為空，則將下拉框的值傳送給服務器if (cartypeValue != "") {if (!cartypeSelect.data(cartypeValue)) {$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){//2.1接收服務器返回的汽車類型if (data.length != 0) {//2.2解析汽車類型的數據，填充到車輪類型的下拉框中wheeltypeSelect.html("");$("<option value=''>請選擇車輪類型</option>").appendTo(wheeltypeSelect);for (var i = 0; i < data.length; i++) {$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);}//2.2.1車輪類型的下拉框顯示出
wheeltypeSelect.parent().show();//2.2.2第二個下拉框后面的指示圖片顯示出來
cartypeSelect.next().show();} else {//2.3沒有任何汽車類型的數據
wheeltypeSelect.parent().hide();cartypeSelect.next().hide();}cartypeSelect.data(cartypeValue, data);}, "json");} else {var data = cartypeSelect.data(cartypeValue);//2.1接收服務器返回的汽車類型if (data.length != 0) {//2.2解析汽車類型的數據，填充到車輪類型的下拉框中wheeltypeSelect.html("");$("<option value=''>請選擇車輪類型</option>").appendTo(wheeltypeSelect);for (var i = 0; i < data.length; i++) {$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);}//2.2.1車輪類型的下拉框顯示出
wheeltypeSelect.parent().show();//2.2.2第二個下拉框后面的指示圖片顯示出來
cartypeSelect.next().show();} else {//2.3沒有任何汽車類型的數據
wheeltypeSelect.parent().hide();cartypeSelect.next().hide();}}} else {//3.如果值為空，那么第三個下拉框所在span要隱藏起來，第二個下拉框后面的指示圖片也要隱藏
wheeltypeSelect.parent().hide();cartypeSelect.next().hide();}});wheeltypeSelect.change(function(){//1.獲取車輪類型var wheeltypeValue = $(this).val();//2.根據汽車廠商名稱，汽車型號和車輪類型得到汽車圖片的文件名var carnameValue = carnameSelect.val();var cartypeValue = cartypeSelect.val();var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";//3.顯示出loading的圖片
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();});//3.修改汽車圖片節點的src的值，讓汽車圖片顯示出來//carimg.attr("src","images/" + carimgname).show();//4.使汽車圖片的節點顯示出來
});//給數據裝載中的節點定義ajax事件，實現動畫提示效果$(".loading").ajaxStart(function(){$(this).css("visibility","visible");$(this).animate({opacity: 1},0);}).ajaxStop(function(){$(this).animate({opacity: 0},500);});
}) .loading {width: 400px;/*margin-left: auto;*//*margin-right: auto;*/margin: 0 auto;visibility: hidden;
}
.loading p {text-align: center;
}
p {margin: 0;
}
.car {/*width: 500px;*//*margin: 0 auto;*/text-align: center;
}
.carimage {text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {display: none;
}
?
轉載于:https://www.cnblogs.com/zousheng7018/archive/2012/10/30/2746264.html
總結
以上是生活随笔為你收集整理的级联下拉框效果，动态加载图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 壊小子的学习【程序开发学习篇】（一）培训
- 下一篇： 如何判断浏览器的请求头是不是结束