2017-08-16

[MVC] FormCollection 如何取得 Listbox 所有 Option

MVC 的架構中,View 裡只要有被 Form 包住的元件,post 後都能用 FormCollection 取得指定元件的值。

今天將 select tag 加上屬性 size="5",讓它變成 Listbox,如下所示:
<select id="select1" size="5">
    <option value="Tim1">Tim</option>
    <option value="John1">John</option>
</select>

然後直覺覺得使用 FormCollection 就能取到所有的值 (Tim1, John1),想不到都回傳 null,為什麼會是 null 呢? 至少不是 Tim1 就要是 John1 其中之一吧 !

一般較常使用沒有加屬性 size 的 select tag,也就是下拉選單,它不管怎樣一定會選在一個 option 上,所以 FormCollection 取到的就是這個被選中的 option value。
這概念在 Listbox 可行不通,因為 Listbox 預設並不會選在一個 option 上,一定要你有點選其中之一,才算是有選上,否則只能得到 null 。

知道了 Listbox 的特性後,想取得所有的 option value 就好辦了,只要在 post 之前先將所有 option 選起來,這樣 FormCollection 就會得到所有 option 的 value了。要注意的是,select tag 記得加上屬性 multiple,才支援多選。
<!--加上 multiple 支援多選-->
<select id="select1" multiple size="5">
    <option value="Tim1">Tim</option>
    <option value="John1">John</option>
</select>

...

// 將所有 option 選起來
<script>
    $("#select1 option").attr("selected", "selected");
</script>


參考連結:stackOverflow

沒有留言:

張貼留言