級聯表分為多層,只有上一層確定數據才會顯示當前層。
HTML使用<select>標簽為數據分層,只需要填入第一層的數據即可,剩余層通過jQuery從服務器端導入數據。
通過CSS設置所需樣式,隱藏掉(visibility 或 display)暫不顯示的塊,保留第一層<select>供選擇。
jQuery部分:
1.為各層<select>設置 change 事件,處理下拉框數據變化后發生的事情。
2.在 change 事件中檢測<select>的 value 值,使用 val() 方法。
3.value值不存在,則隱藏掉相應層和需隱藏的數據塊。
4.value值存在,則通過 $.get ($.post)方法從服務器端異步請求數據,參數為 $.post(”請求數據文件",{ 想傳遞的參數 },function() { } ,返回類型("json") )。
5.當返回數據為數組時,可以判斷數據長度來得知是否獲取到可用數據。
6.利用數據填充新創建的<option>標簽,再 appendTo() 到對應的層。
7.可利用到的技術:
1.通過 attr 改屬性。
2.AjaxStart事件,在每一個jQuery發出ajax請求開始前執行。 ajaxEnd事件,在所有ajax請求結束后執行。 ajaxCompelete事件,在每一個ajax請求結束后執行。
3.通過 new Image() 對圖片進行預裝載。
4.可利用 .data() 方法對數據進行緩存或者讀取。
5.用 animate() 實現動畫效果。
新聞熱點
疑難解答