Bootstrap, jQuery 樣式化 select 外掛

本來 html 的 select 就不大能樣式化，本來只是改變 select 的高度，後來發現 Mac 的 chorme 跟 safari 都不支援，我想有需求還是用 plugin 好了。

網路上有很多，我這邊找了兩個來用。

Bootstrap-select
這個是 bootstrap 的，引入該引入的。

view plaincopy to clipboardprint

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>   
2. <script type="text/javascript" src="bootstrap-select.js"></script>   
3. <link rel="stylesheet" type="text/css" href="bootstrap-select.css">   
4.   
5. <!-- 3.0 -->   
6. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">   
7. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  

html的結構就照舊就好了， plugin 會自動把 html 變成可以樣式化的 tag，然後使用 plugin。

view plaincopy to clipboardprint

1. $('select').selectpicker();  

不過如果一開始沒用 bootstrap ，回頭要改樣式就很痛苦，於是另一個是用純 jQuery 的 jquery-selectbox

同樣引入該引入的(js 跟 css)，就可以用了。

view plaincopy to clipboardprint

1. $('select').selectBox();