原文地址：→看過(guò)來(lái)
寫(xiě)在前面
select 是HTML表單元素中很常用的一個(gè)著蟹，其中很重要的幾個(gè)屬性常被忽略，但這幾個(gè)屬性卻能幫助我們完成很多的功能梢莽，當(dāng)然萧豆，select下拉列表默認(rèn)樣式很不友好，所以更多的時(shí)候可以自己模擬實(shí)現(xiàn)一個(gè)同樣功能的下拉菜單昏名。下文先介紹select標(biāo)簽的一些屬性及使用涮雷，后面再模擬一個(gè)相同效果的下拉菜單。
介紹之前先看下demo預(yù)覽圖：
-
firefox下select的默認(rèn)樣式：
firefox-default -
chrome下select的默認(rèn)樣式：
chrome-default -
firefox下自定義select下拉列表的icon效果：
firefox-self -
chrome下自定義select下拉列表的icon效果：
chrome-self -
原生js模擬select下拉列表的實(shí)現(xiàn)效果(chrome及firefox效果一致)：
模擬select
源代碼地址→傳送門(mén)
預(yù)覽地址→傳送門(mén)
1. select表單元素及相關(guān)屬性（我只是大自然的搬運(yùn)工）
提示
select 元素是一種表單控件轻局，可用于在表單中接受用戶輸入-
支持的全局屬性
- 僅挑幾個(gè)屬性
- autofocus(其值為autofocus): 規(guī)定在頁(yè)面加載后文本區(qū)域自動(dòng)獲得焦點(diǎn)洪鸭。
- disabled(值為disabled): 規(guī)定禁用該下拉列表膜钓。
- form(值為form_id): 規(guī)定文本區(qū)域所屬的一個(gè)或多個(gè)表單。
- multiple(值為multiple): 規(guī)定可選擇多個(gè)選項(xiàng)卿嘲。
-
支持的事件屬性
- 挑一個(gè)最常用到的額
- onchange：當(dāng)select改變選擇時(shí)調(diào)用的事件句柄颂斜。(可以實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的效果)
-
selected對(duì)象的屬性及方法
- 挑幾個(gè)重要的額
- options[]：返回包含下拉列表中的所有選項(xiàng)的一個(gè)數(shù)組。
- length：返回下拉列表中的選項(xiàng)數(shù)目拾枣。
- selectIndex：設(shè)置或返回下拉列表中被選項(xiàng)目的索引號(hào)沃疮。
- add(): 向下拉列表添加一個(gè)選項(xiàng)。
- remove(): 從下拉列表中刪除一個(gè)選項(xiàng)梅肤。
-
option標(biāo)簽
- option元素定義下拉列表中的一個(gè)選項(xiàng)（一個(gè)條目）司蔬。
- disabled(值為disabled)：規(guī)定此選項(xiàng)應(yīng)在首次加載時(shí)被禁用。
- label(值為text)：定義當(dāng)使用 <optgroup> 時(shí)所使用的標(biāo)注姨蝴。
- selected)(值為selected)：規(guī)定選項(xiàng)（在首次顯示在列表中時(shí)）表現(xiàn)為選中狀態(tài)俊啼。
- value(text): 定義送往服務(wù)器的選項(xiàng)值。
-
option對(duì)象的屬性
- 幾個(gè)比較重要的額
- defaultSelected：返回 selected 屬性的默認(rèn)值左医。
- disabled:設(shè)置或返回選項(xiàng)是否應(yīng)被禁用授帕。
- index：返回下拉列表中某個(gè)選項(xiàng)的索引位置。
- selected：設(shè)置或返回 selected 屬性的值浮梢。
注意：
- select本身的樣式可用css設(shè)置跛十，但對(duì)option設(shè)置的樣式在chrome中不起作用，在Firefox可行
- w3c官網(wǎng)的詳細(xì)解釋 → 傳送門(mén)
2. HTML標(biāo)簽自定義屬性（純屬題外話）
HTML5 data-*自定義屬性：添加data-前綴使屬性變成自定義屬性秕硝，最大的好處是我們可以把所有自定義屬性在dataset對(duì)象中統(tǒng)一管理芥映。
<div id="student" data-weight="98">點(diǎn)擊顯示</div>
var student = document.getElementById("student");
student.dataset.cm = '168'; //設(shè)置自定義屬性
var stuWeight = studdent.dataset.weight; //獲取自定義屬性值
student.dataset.birthDate = '19980612'; //連字符的自定義屬性 (例如設(shè)置data-birth-date)
3. 自定義下拉列表的圖標(biāo)
select默認(rèn)樣式中的下拉按鈕不是很好看，我們可以自己用替張圖片替換掉远豺。（效果看文章上面的鏈接奈偏，請(qǐng)忽略我的丑丑的圖標(biāo)額）
- 對(duì)select自定義圖標(biāo)時(shí)需要設(shè)置apperance屬性為
none(隱藏原有小三角)，并做兼容 - 加上將要替換的自定義圖標(biāo)即可
select{
-webkit-appearance: none; /*隱藏默認(rèn)樣式中的小三角*/
-moz-appearance: none;
background: url('http://opif0c56u.bkt.clouddn.com/select.gif') no-repeat scroll right 8px center;
}
- 可對(duì)option添加背景色
- 在firefox中可使用偽元素
:before對(duì)option添加序號(hào)（此處插播一個(gè)css添加序號(hào)的方法）
select{
counter-reset: item; //類似于聲明計(jì)數(shù)變量（聲明在父元素中）
}
select option:before {
counter-increment: item; //要使用的計(jì)數(shù)名
content: counter(item) " . "; //追加前置序號(hào),chrome對(duì)option的設(shè)置中不起作用
}
4. js模擬select下拉菜單(重頭戲)
許多時(shí)候會(huì)覺(jué)得select表單特別的不好用躯护，不能自己添加很多的樣式惊来，小伙伴們還是自己模擬一個(gè)吧！
- html代碼結(jié)構(gòu)：
<div id="sel-wrap">
<div id="sel-show">=請(qǐng)選擇=</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>
下拉按鈕的圖標(biāo)跟上面自定義的方式一致（這里不再說(shuō)了）榛做。
hover到li上時(shí)唁盏，利用偽元素
:before追加一個(gè)對(duì)勾内狸。
#sel-option li:hover:before {
content: '\2714' ' '; //此處為對(duì)勾+空格
}
- 下面說(shuō)下實(shí)現(xiàn)原理：
- 下拉菜單的選項(xiàng)為ul中的內(nèi)容检眯，需要先隱藏起來(lái)，且顯示的時(shí)候是浮在其他內(nèi)容的上面昆淡，此處需要使用position來(lái)實(shí)現(xiàn)锰瘸。（即脫離文檔流）
#sel-wrap{
position: relative; //設(shè)置父元素
}
#sel-option{
position: absolute; //設(shè)置下拉列項(xiàng)的包裹層
}
- 點(diǎn)擊下拉框時(shí)顯示下拉列表項(xiàng)
var flag = false; //初始化一個(gè)flag標(biāo)記
selShow.onclick = function () {
flag = !flag;
if (flag == true) {
selOption.style.display = 'block';
} else {
selOption.style.display = 'none';
}
};
- 點(diǎn)擊列表項(xiàng)時(shí)將選中值傳遞給下拉框并顯示，同時(shí)下拉項(xiàng)收起（此處的點(diǎn)擊事件綁定在父元素中）
selOption.onclick = function (e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target && target.nodeName == 'LI') {
selShow.innerText = target.innerText;
selOption.style.display = 'none';
flag = false;
}
};
當(dāng)下拉項(xiàng)顯示并未選中任何下拉項(xiàng)時(shí)昂灵，點(diǎn)擊下拉框收起下拉項(xiàng)
當(dāng)下拉項(xiàng)顯示并未選中任何下拉項(xiàng)時(shí)避凝，點(diǎn)擊下拉項(xiàng)以外的任意位置舞萄，收起下拉框(將事件綁定在body上)
bd.onclick = function (ev) {
var e = ev || event;
var target = e.target || e.srcElement;
if (target && target.id != 'sel-option' && target.id != 'sel-show' && target.className != 'item') {
selOption.style.display = 'none';
flag = false;
} else {
return false;
}
if (e && e.stopPropagation) {//阻止冒泡
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
};
- 最終實(shí)現(xiàn)（樣式什么的都可以隨便改）：
小結(jié)
- 小花作為菜鳥(niǎo)第一次自己模擬下拉列表的實(shí)現(xiàn)，有可能存在代碼欠缺管削，但是為了方便以后使用的時(shí)候查詢倒脓，所以就記錄下
- 歡迎大佬們指點(diǎn)
