原文地址：→看過來
寫在前面
select 是HTML表單元素中很常用的一個，其中很重要的幾個屬性常被忽略，但這幾個屬性卻能幫助我們完成很多的功能，當然，select下拉列表默認樣式很不友好，所以更多的時候可以自己模擬實現一個同樣功能的下拉菜單。下文先介紹select標簽的一些屬性及使用，后面再模擬一個相同效果的下拉菜單。
介紹之前先看下demo預覽圖：
-
firefox下select的默認樣式：
-
chrome下select的默認樣式：
-
firefox下自定義select下拉列表的icon效果：
-
chrome下自定義select下拉列表的icon效果：
-
原生js模擬select下拉列表的實現效果(chrome及firefox效果一致)：
源代碼地址→傳送門
預覽地址→傳送門
1. select表單元素及相關屬性（我只是大自然的搬運工）
-
提示
select 元素是一種表單控件，可用於在表單中接受用戶輸入 -
支持的全局屬性
- 僅挑幾個屬性
- autofocus(其值為autofocus): 規定在頁面加載后文本區域自動獲得焦點。
- disabled(值為disabled): 規定禁用該下拉列表。
- form(值為form_id): 規定文本區域所屬的一個或多個表單。
- multiple(值為multiple): 規定可選擇多個選項。
-
支持的事件屬性
- 挑一個最常用到的額
- onchange：當select改變選擇時調用的事件句柄。(可以實現三級聯動的效果)
-
selected對象的屬性及方法
- 挑幾個重要的額
- options[]：返回包含下拉列表中的所有選項的一個數組。
- length：返回下拉列表中的選項數目。
- selectIndex：設置或返回下拉列表中被選項目的索引號。
- add(): 向下拉列表添加一個選項。
- remove(): 從下拉列表中刪除一個選項。
-
option標簽
- option元素定義下拉列表中的一個選項（一個條目）。
- disabled(值為disabled)：規定此選項應在首次加載時被禁用。
- label(值為text)：定義當使用
- selected)(值為selected)：規定選項（在首次顯示在列表中時）表現為選中狀態。
- value(text): 定義送往服務器的選項值。
-
option對象的屬性
- 幾個比較重要的額
- defaultSelected：返回 selected 屬性的默認值。
- disabled:設置或返回選項是否應被禁用。
- index：返回下拉列表中某個選項的索引位置。
- selected：設置或返回 selected 屬性的值。
注意：
- select本身的樣式可用css設置，但對option設置的樣式在chrome中不起作用，在Firefox可行
- w3c官網的詳細解釋 → 傳送門
2. HTML標簽自定義屬性（純屬題外話）
HTML5 data-*自定義屬性：添加data-前綴使屬性變成自定義屬性，最大的好處是我們可以把所有自定義屬性在dataset對象中統一管理。
<div id="student" data-weight="98">點擊顯示</div>
var student = document.getElementById("student");
student.dataset.cm = '168'; //設置自定義屬性
var stuWeight = studdent.dataset.weight; //獲取自定義屬性值
student.dataset.birthDate = '19980612'; //連字符的自定義屬性 (例如設置data-birth-date)
3. 自定義下拉列表的圖標
select默認樣式中的下拉按鈕不是很好看，我們可以自己用替張圖片替換掉。（效果看文章上面的鏈接，請忽略我的丑丑的圖標額）
- 對select自定義圖標時需要設置apperance屬性為
none(隱藏原有小三角)，並做兼容 - 加上將要替換的自定義圖標即可
select{
-webkit-appearance: none; /*隱藏默認樣式中的小三角*/
-moz-appearance: none;
background: url('http://opif0c56u.bkt.clouddn.com/select.gif') no-repeat scroll right 8px center;
}
- 可對option添加背景色
- 在firefox中可使用偽元素
:before對option添加序號（此處插播一個css添加序號的方法）
select{
counter-reset: item; //類似於聲明計數變量（聲明在父元素中）
}
select option:before {
counter-increment: item; //要使用的計數名
content: counter(item) " . "; //追加前置序號,chrome對option的設置中不起作用
}
4. js模擬select下拉菜單(重頭戲)
許多時候會覺得select表單特別的不好用，不能自己添加很多的樣式，小伙伴們還是自己模擬一個吧！
- html代碼結構：
<div id="sel-wrap">
<div id="sel-show">=請選擇=</div>
<ul id="sel-option">
<li class="item">早上吃包子</li>
<li class="item">中午吃米飯</li>
<li class="item">晚上吃面條</li>
<li class="item">宵夜吃燒烤</li>
<li class="item">睡前喝牛奶</li>
</ul>
</div>
-
下拉按鈕的圖標跟上面自定義的方式一致（這里不再說了）。
-
hover到li上時，利用偽元素
:before追加一個對勾。
#sel-option li:hover:before {
content: '\2714' ' '; //此處為對勾+空格
}
- 下面說下實現原理：
- 下拉菜單的選項為ul中的內容，需要先隱藏起來，且顯示的時候是浮在其他內容的上面，此處需要使用position來實現。（即脫離文檔流）
#sel-wrap{
position: relative; //設置父元素
}
#sel-option{
position: absolute; //設置下拉列項的包裹層
}
-
點擊下拉框時顯示下拉列表項
-
點擊列表項時將選中值傳遞給下拉框並顯示，同時下拉項收起（此處的點擊事件綁定在父元素中）
-
當下拉項顯示並未選中任何下拉項時，點擊下拉框收起下拉項
-
當下拉項顯示並未選中任何下拉項時，點擊下拉項以外的任意位置，收起下拉框
-
最終實現（樣式什么的都可以隨便改）：
小結
- 小花作為菜鳥第一次自己模擬下拉列表的實現，有可能存在代碼欠缺，但是為了方便以后使用的時候查詢，所以就記錄下
- 歡迎大佬們指點