節(jié)課，我們學(xué)習(xí)表單下拉菜單控件。

當用戶點擊選擇框的時候，會彈出一個下拉列表，用戶可以從列表中選擇一個選項，我們稱這個控件為下拉菜單。下拉菜單隨處可見：購物商品配送的地址信息選擇，

出生年月日的生日信息選擇等等。

在HTML中如何定義一個下 拉菜單呢?

可以使用 select 標簽來定義，select 是選擇的意思。基本語法為：<select><option></option></select>

select 標簽包含一個或多個 option 子標簽。option 是選項的意思，定義了一個可以被選擇的選項。<option></option>。

注意：select標簽里面只能放置 option 標簽。

打開編輯器，新建一個 select_option.html 頁面，自動補全基礎(chǔ)代碼，在body標簽內(nèi)部編寫一個 form 表單標簽，在 form 標簽里面添加文本 出生日期：。回車換行。

接著添加一個 select 標簽，默認 emmet 會給 select 定義 id 和 name 屬性，我們先刪除這兩個屬性，以后我們會接觸到他們。

在 select 標簽內(nèi)部，使用 emmet 語句：option{199$}*9 自動生成一組 1991 年到 1999 年的選項。這里的 value 屬性在后面介紹，先不用理睬它。

在瀏覽器中打開頁面，一個簡單的下拉菜單做好了。鼠標點擊控件，彈出選項菜單，選中其中一個可以更換下拉菜單的選項。

刷新頁面，我們發(fā)現(xiàn)，默認情況下，第一個 option 1991 年作為當前選項，我們可以修改這個默認值嗎？

要更改默認選項，需要給 option 標簽添加一個默認選擇的 selected 屬性。

回到編輯器，在 1995 年的 option上定義 selected 屬性。保存。

回到瀏覽器，刷新。1995 年就是默認的選項了。

有時，我們還會遇到這樣的多選下拉菜單，如何實現(xiàn)呢？

我們只需要給 select 標簽定義一個 multiple 屬性即可。multiple 是多個的意思，允許用戶選擇一個以上 的值。

回到編輯器，在 select 標簽結(jié)束的地方回車換行，添加一個 br，再回車換行。

再添加一個 select 標簽，在標簽內(nèi)部定義一個 option 標簽，鼠標光標停留在當前行，同時按住鍵盤的 alt 和 shift 鍵不放，再敲擊 7 下鍵盤的下箭頭，復(fù)制出 7 個新的 option 標簽。

分別在 option 標簽內(nèi)部填入音樂，電影，短 視頻，游戲，盲盒，漫畫，小說，前端。最后給 select 定義一個屬性 multiple，保存。

回到瀏覽器，刷新。使用ctrl 配合鼠標點擊，就可以選擇多個值了。

現(xiàn)在 select 控件的默認可見行數(shù)為 4 行，可以設(shè)置這個值嗎？

給 select 標簽定義 size 屬性可以定義控件的默認可見行數(shù)，size 是尺寸的意思，值是一個數(shù)字。

回到編輯器，給 select 標簽再添加第一個 size 屬性，值為8，保存。

回到瀏覽器，刷新。下拉菜單的全部選項都顯示了。

表單下拉菜單的制作我們就講完了，大家快來試一試吧！

配套視頻「鏈接」

出式菜單前端源碼。

大家好，今天給大家介紹一款漂亮的彈出式菜單前端源碼。漂亮的彈出動畫，分辨率自適應(yīng)，源碼完整，需要的朋友可以下載學(xué)習(xí)。

家好，今天給大家介紹一款，css+js實現(xiàn)的下拉百葉窗式彈出菜單html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

下拉動畫非常自然，而且還可以收折恢復(fù)到初始狀態(tài)（圖2）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

本源碼編碼：20218，需要的朋友，訪問下面鏈接后，搜索20218，即可獲取。

就愛UI - 分享UI設(shè)計的點點滴滴