網上有各種各樣的關於 select 選擇框的美化，找了很多，並沒有好的樣式效果。所以就找了乙個利用 ul li 做的類似 select 選擇框的效果，不廢話了，先上圖，效果如下：
對於上圖的箭頭效果，可以看看我上篇部落格 點選這裡
點選乙個 test ，就會把列表顯示出來，再次點選，列表隱藏，選擇乙個 li ，就會把 span 裡的內容替換成 li 的內容，然後可以用 js 監控 span 的變化，然後執行你的**。效果如下：
html **如下：
<css **如下：div
id="type"
class
="test"
>
<
span
>投資種類
span
>
<
ul class
="dropdown"
>
<
li>**
li>
<
li>**
li>
<
li>期權
li>
ul>
div>
<
div
id="kind"
class
="test"
>
<
span
>投資型別
span
>
<
ul class
="dropdown"
>
<
li>趨勢
li>
<
li>**
li>
<
li>套利
li>
<
li>選股
li>
<
li>擇時
li>
ul>
div>
ul li.test .test:before .test:after .test.active:before.test.active:after.test .dropdown .test.active .dropdown .test .dropdown:before .test .dropdown:after .test .dropdown li .test .dropdown li:first-of-type .test .dropdown li:last-of-type .test .dropdown li:hover對於 :before 和 :after 兩個偽元素不理解可以去看看我上篇部落格 點選這裡
js **如下：
function這裡使用構造-原型組合模式來建立了乙個 dropdown 物件，構造-原型組合模式解釋：屬性寫在建構函式中，是表示每個例項獨有的屬性，讓物件具體化；方法寫在建構函式外，是為了表示每個例項共享的方法。dropdown(el)
dropdown.prototype.initevents = function
() );
obj.li.on('click', function
() );
})}var test1 = new dropdown($('#type'));
var test2 = new dropdown($('#kind'));
test1.initevents();
test2.initevents()
類似ios select下拉選擇框的實現
原理 1。定義每行的高度是40px，在touchend實踐出發時，計算出當前div的scrolltop.判斷是否已經滑動結束。如果滑動結束，四捨五入算出當前的高度距離第幾個最近，則設定div的scrolltop.如果滑動未結束。計算當前的scrolltop,與100毫秒之後的scrolltop值是否...
select下拉框預設選擇
select標籤構成的下拉框和jquery通過js構建的下拉框用法一樣。例如 html下拉框 啟用 停用 js控制的下拉框 editdisplayname combobox 兩者的本質是相同的，但是，select標籤建立的下拉框會預設選中第乙個選項。而js控制的下拉框預設是不會選中任何選項的。當然s...
Select2清空選擇框
初始狀態 使用者選擇後 當我們需要清空這個選擇框的內容該怎麼辦 通過 subject val 可以將select2的選擇框內的val清空，但是在頁面上顯示的仍然是原有的內容 998 1.1版 並不會回到初始狀態，這樣看上去就不太對 然後通過控制台發現選擇框內的資訊是顯示在select2 subjec...