HTML Select標籤展示出ListBox效果並達到可多選效果

今天要來介紹各為一個HTML的Tag使用方式
這個功能在一般網頁上其實不算常見，但是在某些時候總是會要用到這個功能

這個方式非常的簡單就是對Select Tag設定Size屬性
但是請記得要設定2以上才行唷~!
設1的話會跟沒有做任何設定一樣變成預設樣式

各位請看下面完整的Code

<select id="sel" size="2">
  <option value="0">選項1</option>
  <option value="1">選項2</option>
  <option value="2">選項3</option>
  <option value="3">選項4</option>
  <option value="4">選項5</option>
  <option value="5">選項6</option>
  <option value="6">選項7</option>
  <option value="7">選項8</option>
  <option value="8">選項9</option>
  <option value="9">選項10</option>
</select>

這個關鍵點就在於下面這一行

<select id="sel" size="2"></select>

有沒有看到就是size="2"這一個屬性的設定
只要設定這個就能夠讓Select Tag展現出ListBox的效果唷~!

但是有的時候我們會需要能夠同時選取多個選項
這時候就又要使用另一個屬性了那就是multiple屬性

<select id="sel" size="2" multiple="multiple">
  <option value="0">選項1</option>
  <option value="1">選項2</option>
  <option value="2">選項3</option>
  <option value="3">選項4</option>
  <option value="4">選項5</option>
  <option value="5">選項6</option>
  <option value="6">選項7</option>
  <option value="7">選項8</option>
  <option value="8">選項9</option>
  <option value="9">選項10</option>
</select>

這部分的關鍵點在這

<select id="sel" size="2" multiple="multiple"></select>
<select id="sel" size="2" multiple></select>

就像上面Code所寫的幫Select Tag設定multiple="multiple"屬性後就可以達成目的了
是的沒有錯本來以為沒辦法實現的效果短短兩個屬性就能夠達成
真是令人開心呀~!
但是在這邊要特別的注意地方是
要多選的話要使用「Ctrl+滑鼠左鍵」進行多選的動作才行唷~!
最後來讓我們看看Dome吧
Dome

See the Pen HTML Select標籤展示出ListBox效果並達到可多選效果 by jen (@jen_huang) on CodePen.