[Javascript] 關於一個 select 的 multiple 的處理

2023-07-06

最近在處理一項需求時,遇到了一個讓我感到驚訝的情況,但仔細思考後發現其實只是我自己的誤解。這也是一個比較少用到的情境。

在HTML規範中,select元素有一個multiple 的屬性,詳細可參考這裡。儘管多選通常可以使用input checkbox來實現,

但在前端處理上會稍嫌繁瑣。因此,有時我會建議客戶使用select的multiple="multiple"屬性,特別是在手機上,操作體驗相對更為舒適。


然而,我之前有個誤解,認為應該要去控制select中的option的selected屬性。

但實際上這樣做是行不通的,會導致顯示和讀取值出現混亂,讓畫面顯得非常奇怪。最終,我轉變了思維,發現只需要對select進行操作即可解決問題。

雖然這花了我一些時間找到問題的所在,但我仍然希望這段筆記能夠幫助其他人避免類似的困擾。



當麻許的超技八 2014 | Donma Hsu Design.