select表單元素詳解及下拉列表模擬實現

原文地址：→看過來

寫在前面

select 是HTML表單元素中很經常使用的一個，其中很重要的幾個屬性常被忽略，但這幾個屬性卻能幫助咱們完成不少的功能，固然，select下拉列表默認樣式很不友好，因此更多的時候能夠本身模擬實現一個一樣功能的下拉菜單。下文先介紹select標籤的一些屬性及使用，後面再模擬一個相同效果的下拉菜單。

介紹以前先看下demo預覽圖：

1. firefox下select的默認樣式：
   

2. chrome下select的默認樣式：
   

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

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

5. 原生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 屬性的值。

注意：

1. select自己的樣式可用css設置，但對option設置的樣式在chrome中不起做用，在Firefox可行
2. 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默認樣式中的下拉按鈕不是很好看，咱們能夠本身用替張圖片替換掉。（效果看文章上面的連接，請忽略個人醜醜的圖標額）

1. 對select自定義圖標時須要設置apperance屬性爲none(隱藏原有小三角)，並作兼容
2. 加上將要替換的自定義圖標便可

select{
    -webkit-appearance: none; /*隱藏默認樣式中的小三角*/
    -moz-appearance: none;
    background: url('http://opif0c56u.bkt.clouddn.com/select.gif') no-repeat scroll right 8px center; 
}

1. 可對option添加背景色
2. 在firefox中可以使用僞元素:before對option添加序號（此處插播一個css添加序號的方法）

select{
    counter-reset: item; //相似於聲明計數變量（聲明在父元素中）
}
select option:before {
    counter-increment: item;   //要使用的計數名
    content: counter(item) " . "; //追加前置序號,chrome對option的設置中不起做用
}

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

許多時候會以爲select表單特別的很差用，不能本身添加不少的樣式，小夥伴們仍是本身模擬一個吧！

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

1. 下拉按鈕的圖標跟上面自定義的方式一致（這裏再也不說了）。

2. hover到li上時，利用僞元素:before追加一個對勾。

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

1. 下面說下實現原理：
   • 下拉菜單的選項爲ul中的內容，須要先隱藏起來，且顯示的時候是浮在其餘內容的上面，此處須要使用position來實現。（即脫離文檔流）

   #sel-wrap{
    position: relative;  //設置父元素
   }
   #sel-option{
    position: absolute;  //設置下拉列項的包裹層
   }

   • 點擊下拉框時顯示下拉列表項

• 點擊列表項時將選中值傳遞給下拉框並顯示，同時下拉項收起（此處的點擊事件綁定在父元素中）

• 當下拉項顯示並未選中任何下拉項時，點擊下拉框收起下拉項

• 當下拉項顯示並未選中任何下拉項時，點擊下拉項之外的任意位置，收起下拉框

• 最終實現（樣式什麼的均可以隨便改）：

小結

1. 小花做爲菜鳥第一次本身模擬下拉列表的實現，有可能存在代碼欠缺，可是爲了方便之後使用的時候查詢，因此就記錄下
2. 歡迎大佬們指點