認(rèn)識(shí) select option 下拉菜單標(biāo)簽

下拉菜單也是我們?cè)诰W(wǎng)頁(yè)中比較常見(jiàn)的場(chǎng)景。如果我們的選項(xiàng)過(guò)多，如果是放單選框或者多選框的話，會(huì)造成頁(yè)面顯示不太優(yōu)雅，會(huì)鋪放很多的選項(xiàng)。這個(gè)時(shí)候我們使用下拉菜單是最合適不過(guò)的。下拉菜單可以提供很多選項(xiàng)，是比較方便的一種操作。例如以下情況：

使用下拉菜單一方面列表框?yàn)橛脩糨斎霐?shù)據(jù)提供了一種便捷方式，只要把已知的數(shù)據(jù)項(xiàng)列舉出來(lái)，用戶在列表框中選擇列表項(xiàng)就可以；另一方面可以把需要搜集的數(shù)據(jù)規(guī)范化，防止因用戶輸入數(shù)據(jù)的隨意性而造成后端處理數(shù)據(jù)的混亂。例如，在搜集用戶個(gè)人信息時(shí)，可能需要用戶輸入職業(yè)信息，后端程序需要按照職業(yè)信息對(duì)用戶進(jìn)行職業(yè)分類。在這種情況下，采用列表框元素就是比較好的獲取用戶數(shù)據(jù)的方式，可以預(yù)先規(guī)劃好職業(yè)信息，把規(guī)劃好的職業(yè)信息以列表框方式展現(xiàn)給用戶，用戶只需要選擇列表項(xiàng)就可以了，無(wú)需讓用戶輸入職業(yè)信息。

1. select option 標(biāo)簽的使用

select option 標(biāo)簽和 ul li 標(biāo)簽類似，select 標(biāo)簽代表下拉菜單整體，而 option 則是下拉菜單的每一個(gè)選項(xiàng)，代碼如下：

<select>
    <option>蘋(píng)果</option>
    <option>香蕉</option>
    <option>橘子</option>
</select>

效果如下：

我們可以給給 option 標(biāo)簽設(shè)置 disabled屬性，代表當(dāng)前選項(xiàng)是禁用項(xiàng)，不能選擇的，代碼如下：

<select placeholder="請(qǐng)選擇">
    <option>蘋(píng)果</option>
    <option disabled>香蕉</option>
    <option>橘子</option>
</select>

我們也可以給 option 標(biāo)簽設(shè)置 selected屬性來(lái)表示默認(rèn)選中的選項(xiàng)，代碼如下：

<select placeholder="請(qǐng)選擇">
    <option>蘋(píng)果</option>
    <option>香蕉</option>
    <option selected>橘子</option>
</select>

效果如下：

下拉菜單默認(rèn)寬度為選項(xiàng)內(nèi)容寬度撐開(kāi)，如果想設(shè)置下拉菜單的樣式，可以借助 CSS 。

2. 經(jīng)驗(yàn)分享

1. select 標(biāo)簽里面只能嵌套 option 標(biāo)簽，不能嵌套其他標(biāo)簽；
2. 為了增強(qiáng)用戶體驗(yàn)，我們一般把下拉菜單的第一項(xiàng)設(shè)置為請(qǐng)選擇，然后設(shè)置為默認(rèn)選項(xiàng)。

3. 真實(shí)案例分享

慕課網(wǎng)

<select>
    <option value="">請(qǐng)選擇</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>

京東官網(wǎng)

<select>
    <option selected="selected">請(qǐng)選擇出生月份：</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. 小結(jié)

1. select 標(biāo)簽表示下拉菜單整體，option 標(biāo)簽表示下拉菜單的每一個(gè)選項(xiàng)。
2. select 標(biāo)簽里只能嵌套 option 標(biāo)簽。
3. 設(shè)置 option 標(biāo)簽的 disabled屬性，可以禁用該選項(xiàng)。
4. 設(shè)置 option 標(biāo)簽的 selected 屬性，可以默認(rèn)選擇該選項(xiàng)。