bootstrap-select 使用時的注意事項

莊創偉
2 min readApr 12, 2018

--

套入 bootstrap-select 可以輕鬆美化Select控件,其中最強大的功能莫過於option及時搜尋的功能,只要在屬性內加上 data-live-search=true 就可以輕鬆完成

其他還有很多屬性和特效可以使用,詳請可以查看官網範例。(官網連結)

雖然 bootstrap-select 有很多強大的特效和功能可以使用,但是在使用上也有許多需要注意的地方

bootstrap-select 會在原有的select上 蓋上一層Div 來美化(取代)原生的select控件,並且將原生select控件埋到地下98層

因此不論對select 下了onclick或onfocus的動作都不會起作用,因為根本點不到(囧),好消息是onchung 還可以起作用。

除此之外當要動態添加選項或動態增加移除樣式都必須使用 bootstrap-select的語法,詳請可看官網。

比較麻煩的是當要動態生成物件時,直接對控件clone 的話bootstrap-select也是不會起作用的,必須重新讓 bootstrap-select跟新生物件作綁定。然而這個動作很吃效能,如果動態生成的控件過多可能就得評估是否值得為這美美的select特效犧牲操作的流暢度了。

題外話

bootstrap-select可以使用 $(this).val(“xx”).selectpicker(“refresh”) 做到指定選項 比jquery的語法方便XD

--

--

莊創偉
莊創偉

Written by 莊創偉

學海無涯。但是為了生計還是得下海的風塵男子