2008年12月29日 星期一

jQuery Cascade 多重動態select

這次要介紹的是jQuery專門處理動態讀取select所用的plugin--jQuery cascade
一般來說有很多選擇表單有相依性,例如縣市->街道->鄉里這種多層次選單,選了縣市之後依照選擇的值去選街道的值。
在以前沒有aJax的時候只能用onChange重新讀取頁面這種方式來實行,這種方法需要更新整個頁面,會將選單其他部分填的值歸零,若不想歸零還要做過特殊處理,實在很麻煩,幾乎沒有實用性。
但是現在有了ajax之後,就能讓前後端通力合作,一起達到動態更新選單的方法。

cascade是一個專門處理動態變更select的jQuery plugin,中文資源可以找到很多詳細的安裝與使用方法,例如下面這兩篇:
台扣啵的研究日誌--[AJAX] jQuery的多重下拉式選單應用
我想 - 我是屬於海洋--jQuery.cascade + 多重關聯式選單

所以基本的使用方法就不贅述了。

而我想在這邊提醒的是,當使用者選擇母選單時,ajax會將此母選單的值以"val"這個名稱傳送給伺服器,因此伺服器應該抓的就是val這個值!千萬不要自己另外以其他名稱把母選單的值傳過去,伺服器根本不會接到值!
例如在jQuery.cascade + 多重關聯式選單這篇文章中的code:

ajax: {
//所需的後端處理頁面
url:'action.php',
//傳值至後端頁面
data:{ val: $('#myParentSelect').val() }
},

這樣寫有可能val會抓不到任何東西!
為啥呢?因為在cascade.ext的原始碼中,母選單的值已經被指定給val儲存了,其他想要抓到母選單值的動作都會抓不到任何值(或抓到一些奇怪的值),有可能是因為ajax事件發動時,母選單的值尚未改變,因此以jQuery的.val()函式是抓不到任何東西的!

上述這點在使用多重選單時一定要注意!要不然會花上超久的時間抓bug。

4 則留言:

匿名 提到...

//傳值至後端頁面
data:{ val: $('#myParentSelect').val() }
},

這樣寫有可能val會抓不到任何東西

那請問大大要如何改呢
因為一直沒值傳出

by snopy

Peachwa & Neversay 提到...

就是不要寫val這個值。

例如我寫的cascade長這樣:
$('#search_area').cascade('#search_country',{
ajax:{
url:"options_area.php",
type:"GET",
dataType: "json"
},
template: function(item) { return "..."; },
match: function(selectedValue) { return this.When == selectedValue; }
});

Peachwa & Neversay 提到...

你可以看到,我的ajax裡面沒有val這個欄位存在,因為cascade會自動幫你填。

匿名 提到...

thanks Neversay

本來我有把data:{ val: $('#myParentSelect').val() }
}, 拿掉,但是執行時無值
今天在試一次 可以正常執行了

還真是方便的工具啊 ^^
by snopy