jquery實戰-級聯下拉框

2. 級聯下拉框

chainselect.html

<html>
<head>
<title>級聯下拉框</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=”imags/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=”VM >大衆</option>
    </select>
    <img src=images/pfeil.gif” alt=”有資料” />
    </span>
    <span class=”cartype”>
    汽車類型：
    <select></select>
    <img src=”images/pfeil.gif” alt=”有資料” />
    </span>
    <span class=”whelltype”>
    車輪類型：
    <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>

chainselect.css

.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 atuo;
text-align: center;
}
.carimage {
    text-align: center;
}
.cartype , .wheeltype , .carloading, .carimg, .car img {
    display: none;
}

chainselect.js

$(document).ready(function() {
//找到三個下拉框
var carnameSelect = $(“.carname”).children(“select”);
var cartypeSelect + $(“.cartype”).children(“select”);
var wheeltypeSelect = $(“.whelltype”).children(“select”);
var carimg = $(“.carimg”);
//給三個下拉框注冊事件
carnameSelect.change(function(){
    //1. 需要獲得目前下拉框的值
    var carnameValue = $(this).val():
    wheeltypeSelect.parent().hide();
    carimg.hide().attr(“src”,””);
    //2. 如果值不為空，則将下拉框的值傳送給伺服器
    if(carnameValue != “”) {
        if(!carnameSelect.data(carnameValue)) {
        $.post(“ChainSelect”,{keyward: 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);
          cartypeSelect.parent().show();  //汽車類型的下拉框顯示出
          carnameSelect.next().show();   //第一個下拉框後面的訓示圖檔顯示出來
        }
} else {
                //2.3 沒有任何汽車類型的資料
                cartypeSelect.parent().hide();
                carnameSelect.next().hide();
            }
            carnameSelect.data(carnameValue, data);
}, ”json”)
        } else {
            var data = cartypeSelect.data(carnameValue);
            if(data.length != 0) {
    cartypeSelect.html(“”);
    $(“<option value=’’>請選擇汽車類型</option>”).appendTo(cartypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”).appendTo(cartypeSelect);
          cartypeSelect.parent().show();  //汽車類型的下拉框顯示出
          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():
carimg.hide().attr(“src”,””);;
    //2. 如果值不為空，則将下拉框的值傳送給伺服器
    if(cartypeValue != “”) {
        if(!cartypeSelect.data(cartypeValue)) {
        $.post(“ChainSelect”,{keyward: cartypeValue,type: sub}, function(data){
//2.1 接收伺服器傳回的汽車類型
            if(data.length != 0) {
//2.2 解析汽車類型的資料，填充到車輪類型下拉框中
    carwheelSelect.html(“”);
    $(“<option value=’’>請選擇車輪類型</option>”).appendTo(wheeltypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”)
.appendTo(wheeltypeSelect);
          wheeltypeSelect.parent().show();  //車輪類型的下拉框顯示出
          cartypeSelect.next().show();   //第二個下拉框後面的訓示圖檔顯示出來
        }
} else {
                //2.3 沒有任何汽車類型的資料
                wheeltypeSelect.parent().hide();
                cartypeSelect.next().hide();
            }
            cartypeSelect.data(cartypeValue,data);
}, ”json”)
}else {
    var data = cartypeSelect.data(cartypeValue);
if(data.length != 0) {
//2.2 解析汽車類型的資料，填充到車輪類型下拉框中
    carwheelSelect.html(“”);
    $(“<option value=’’>請選擇車輪類型</option>”).appendTo(wheeltypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”)
.appendTo(wheeltypeSelect);
          wheeltypeSelect.parent().show();  //車輪類型的下拉框顯示出
          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”;
    carimg.hide();
$(“.carloading”).show(); //顯示loading的圖檔
    //通過javascript中的Image對象預裝載圖檔
    var cacheimg = new Image();
    $(cacheimg).attr(“src”,”images/” + carimgname).load(function(){
        $(“.carloading”).hide(); //隐藏loading圖檔
        carimg.attr(“src”,”images/” + carimgname).show();
});
//3. 修改汽車圖檔節點的src的值，讓汽車圖檔顯示
    //carimg.attr(“src”,”images/” + carimgname).show();
});

//給資料裝載中的節點定義ajax事件，實作動畫提示效果
$(“.loading”).ajaxStart(function(){
    $(this).css(“visibility”,”visible”);
$(this).animate({
        opacity: 0;
},0);
}).ajaxStop(function(){
    //$(this).fadeOut(500);
    $(this).animate({
        opacity: 0;
},500);
});
});

知識寶典

1. img标簽的alt屬性要寫上，在圖檔尚未裝載進來或圖檔不存在時，這個屬性的文字資訊會顯示出來

2. select表示下拉框，下拉框的每一項都是一個option，option開始結尾标簽中的内容會顯示在頁面上，value屬性的值則是用于在Jquery中用val方法擷取并發送給伺服器的。定義了selected的屬性值為selected時，表示目前option被選中

3. div元素居中顯示的方法：給div設定寬度，然後margin-left和margin-right的值都為auto.簡化方法是margin:0 auto;

4. html的p标簽表示一個段落的内容，其中的内容會獨占一行或多行，後面的内容會另起一行顯示

5. 為了讓p中文字和圖檔居中，可以使用text-align屬性，屬性值為center。p标簽預設有margin-top和margin-bottom的值，需要的話可以通過css清楚

6. visibility的屬性值為hidden是，元素隐藏，但是和display為none不同的是，在頁面中仍然占據一定的空間，隻是不顯示

7. 多個選擇器如果有相同的屬性值，可以放在一起定義，選擇器之間用逗号分隔

8. change方法對于javascript中的onchange事件，可以處理下拉框内容變化的事件

9. parent方法可以獲得一個節點的父節點

10. next方法可以獲得一個節點的下一個兄弟節點，對應的previous方法可以獲得一個節點的上一個兄弟節點

11. $.post方法可以和伺服器端發起post的異步請求。第一個參數是請求的伺服器位址，第二個參數是發送給伺服器端的資料，參數是Javascript的對象，采用名值對的方式表示，第三個參數是回調方法，第四個參數訓示伺服器端傳回的資料類型，Jquery會根據這個參數幫我們進行轉換。get方法隻有第二個參數不同，其他幾個參數用法相同

12. Javascript中的簡單對象定義方式是{key1:value1, key2:value2}

13. JSON的資料格式其實就是Javascript中的一個對象或資料定義的文本格式内容，比如{kery1:value1, key2:[1,2,3]} 或[1,2,{key2:value2}]

14. 可以直接$(“<option></option>”)的方法來建立下拉框中的選項，然後用appendTo這樣的方法加入到下拉框中

15. attr方法可以設定或擷取某一個節點的屬性值

16. ajaxStart在每一個Jquery發出的ajax請求開始前執行，ajaxStop在Jquery隊列中所有的ajax請求結束後執行，ajaxComplete在每一個Jquery發出的ajax請求結束後執行

17. fadeOut和fadeIn可以實作淡出淡入的效果，參數内容和slideUp, slideDown方法類似

18. animate方法可以實作任意的動畫效果，可以控制某個css屬性在某個事件内進行變化，進而達到動畫的效果

19. opacity可以改變元素的透明度，IE中使用過濾器實作，100表示完全顯示，0表示完全透明，非IE浏覽器使用opacity屬性，1表示完全顯示，0表示透明。Jquery在animate方法中屏蔽了浏覽器差異，直接使用opacity就可以達到淡入淡出的效果

20. data方法可以用于緩存資料。緩存可以提高系統的運作效率，降低伺服器端的符合

21. 可以使用Javascript中的Image對象來預裝載圖檔，這樣可以知道圖檔何時裝載完成，以便給出一些圖檔裝載的提示資訊

22. load方法可以對應Javascript中的onload事件，本例中用于捕捉圖檔加載完成的事件

jquery實戰-級聯下拉框

繼續閱讀

2010年終總結--技術篇

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

關于 underscore 中模闆引擎的應用示例

JQuery--dom捕獲html元素

【JavaScript文法】函數對象的淺拷貝、深拷貝

CSS之折疊菜單

JS--運算符

數組和類數組

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo