認識 select option 下拉菜單標簽

下拉菜單也是我們在網頁中比較常見的場景。如果我們的選項過多，如果是放單選框或者多選框的話，會造成頁面顯示不太優雅，會鋪放很多的選項。這個時候我們使用下拉菜單是最合適不過的。下拉菜單可以提供很多選項，是比較方便的一種操作。例如以下情況：

使用下拉菜單一方面列表框為用戶輸入數據提供了一種便捷方式，只要把已知的數據項列舉出來，用戶在列表框中選擇列表項就可以；另一方面可以把需要搜集的數據規范化，防止因用戶輸入數據的隨意性而造成后端處理數據的混亂。例如，在搜集用戶個人信息時，可能需要用戶輸入職業信息，后端程序需要按照職業信息對用戶進行職業分類。在這種情況下，采用列表框元素就是比較好的獲取用戶數據的方式，可以預先規劃好職業信息，把規劃好的職業信息以列表框方式展現給用戶，用戶只需要選擇列表項就可以了，無需讓用戶輸入職業信息。

1. select option 標簽的使用

select option 標簽和 ul li 標簽類似，select 標簽代表下拉菜單整體，而 option 則是下拉菜單的每一個選項，代碼如下：

<select>
    <option>蘋果</option>
    <option>香蕉</option>
    <option>橘子</option>
</select>

效果如下：

我們可以給給 option 標簽設置 disabled屬性，代表當前選項是禁用項，不能選擇的，代碼如下：

<select placeholder="請選擇">
    <option>蘋果</option>
    <option disabled>香蕉</option>
    <option>橘子</option>
</select>

我們也可以給 option 標簽設置 selected屬性來表示默認選中的選項，代碼如下：

<select placeholder="請選擇">
    <option>蘋果</option>
    <option>香蕉</option>
    <option selected>橘子</option>
</select>

效果如下：

下拉菜單默認寬度為選項內容寬度撐開，如果想設置下拉菜單的樣式，可以借助 CSS 。

2. 經驗分享

1. select 標簽里面只能嵌套 option 標簽，不能嵌套其他標簽；
2. 為了增強用戶體驗，我們一般把下拉菜單的第一項設置為請選擇，然后設置為默認選項。

3. 真實案例分享

慕課網

<select>
    <option value="">請選擇</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
</select>

京東官網

<select>
    <option selected="selected">請選擇出生月份：</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

4. 小結

1. select 標簽表示下拉菜單整體，option 標簽表示下拉菜單的每一個選項。
2. select 標簽里只能嵌套 option 標簽。
3. 設置 option 標簽的 disabled屬性，可以禁用該選項。
4. 設置 option 標簽的 selected 屬性，可以默認選擇該選項。