圖書館前

原文地址：→看過來

寫在前面

select 是HTML表單元素中很常用的一個(gè)，其中很重要的幾個(gè)屬性常被忽略，但這幾個(gè)屬性卻能幫助我們完成很多的功能，當(dāng)然，select下拉列表默認(rèn)樣式很不友好，所以更多的時(shí)候可以自己模擬實(shí)現(xiàn)一個(gè)同樣功能的下拉菜單。下文先介紹select標(biāo)簽的一些屬性及使用，后面再模擬一個(gè)相同效果的下拉菜單。

介紹之前先看下demo預(yù)覽圖：

1. firefox下select的默認(rèn)樣式：

   
   
   firefox-default

2. chrome下select的默認(rèn)樣式：

   
   
   chrome-default

3. firefox下自定義select下拉列表的icon效果：

   
   
   firefox-self

4. chrome下自定義select下拉列表的icon效果：

   
   
   chrome-self

5. 原生js模擬select下拉列表的實(shí)現(xiàn)效果(chrome及firefox效果一致)：

   
   
   模擬select

源代碼地址→傳送門

預(yù)覽地址→傳送門

1. select表單元素及相關(guān)屬性（我只是大自然的搬運(yùn)工）

• 提示
  select 元素是一種表單控件，可用于在表單中接受用戶輸入

• 支持的全局屬性

  • 僅挑幾個(gè)屬性
  • autofocus(其值為autofocus): 規(guī)定在頁面加載后文本區(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對象的屬性及方法

  • 挑幾個(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對象的屬性

  • 幾個(gè)比較重要的額
  • defaultSelected：返回 selected 屬性的默認(rèn)值。
  • disabled:設(shè)置或返回選項(xiàng)是否應(yīng)被禁用。
  • index：返回下拉列表中某個(gè)選項(xiàng)的索引位置。
  • selected：設(shè)置或返回 selected 屬性的值。

注意：

1. select本身的樣式可用css設(shè)置，但對option設(shè)置的樣式在chrome中不起作用，在Firefox可行
2. w3c官網(wǎng)的詳細(xì)解釋 → 傳送門

2. HTML標(biāo)簽自定義屬性（純屬題外話）

HTML5 data-*自定義屬性：添加data-前綴使屬性變成自定義屬性，最大的好處是我們可以把所有自定義屬性在dataset對象中統(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)樣式中的下拉按鈕不是很好看，我們可以自己用替張圖片替換掉。（效果看文章上面的鏈接，請忽略我的丑丑的圖標(biāo)額）

1. 對select自定義圖標(biāo)時(shí)需要設(shè)置apperance屬性為none(隱藏原有小三角)，并做兼容
2. 加上將要替換的自定義圖標(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; 
}

3. 可對option添加背景色
4. 在firefox中可使用偽元素:before對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對option的設(shè)置中不起作用
}

4. js模擬select下拉菜單(重頭戲)

許多時(shí)候會(huì)覺得select表單特別的不好用，不能自己添加很多的樣式，小伙伴們還是自己模擬一個(gè)吧！

1. html代碼結(jié)構(gòu)：

<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>

2. 下拉按鈕的圖標(biāo)跟上面自定義的方式一致（這里不再說了）。

3. hover到li上時(shí)，利用偽元素:before追加一個(gè)對勾。

#sel-option li:hover:before {
    content: '\2714' ' ';  //此處為對勾+空格
    }

4. 下面說下實(shí)現(xiàn)原理：
   • 下拉菜單的選項(xiàng)為ul中的內(nèi)容，需要先隱藏起來，且顯示的時(shí)候是浮在其他內(nèi)容的上面，此處需要使用position來實(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é)

1. 小花作為菜鳥第一次自己模擬下拉列表的實(shí)現(xiàn)，有可能存在代碼欠缺，但是為了方便以后使用的時(shí)候查詢，所以就記錄下
2. 歡迎大佬們指點(diǎn)