下拉菜單在網頁中通過 select 和 option 標簽實現，基本結構是用 select 包裹多個 option，每個 option 代表一個可選項。1. 默認選中第一個選項，若需指定默認值，可在對應 option 添加 selected 屬性；2. 獲取選中值可通過為 select 設置 name 或 id，配合表單提交或 JavaScript 操作獲取；3. 可使用 disabled 屬性禁用某些選項，提升用戶體驗；4. 若選項較多，可用 optgroup 對選項進行分組展示，使界面更清晰易讀。這些細節處理得當，有助于提升用戶交互體驗。
下拉菜單在網頁中很常見，比如選擇地區、性別或者分類篩選等。html 中最簡單實現下拉菜單的方式就是用 select 和 option 這兩個標簽配合使用。
基本結構：select 包裹多個 option
select 標簽代表一個下拉框，里面可以包含多個 option 標簽，每個 option 是一個可選項。基本寫法如下：
<select> <option value="1">北京</option> <option value="2">上海</option> <option value="3">廣州</option> </select>
這樣就會顯示一個下拉菜單，默認選中第一個選項。用戶點擊后可以看到所有選項，并可以選擇其中一項。
設置默認選項：selected 屬性
如果你希望某個選項默認被選中，可以在對應的 option 上加上 selected 屬性：
<option value="2" selected>上海</option>
這樣頁面加載時會直接顯示“上海”這個選項。
獲取選中值：結合 name 或 id 使用
光有界面是不夠的，通常我們還需要獲取用戶的選擇結果。這時可以通過給 select 添加 name 或 id 屬性來配合表單提交或 JavaScript 操作。
例如，在表單中：
<form action="/submit" method="post"> <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">廣州</option> </select> <button type="submit">提交</button> </form>
當用戶提交表單時，服務器就可以通過 city 這個字段拿到用戶選擇的值。
如果是用 JavaScript 獲取選中項：
const select = document.getElementById('citySelect'); console.log(select.value); // 輸出當前選中的 value
別忘了給 select 加上 id=”citySelect” 才能正確獲取。
更多細節：禁用某些選項或分組展示
有時候你可能不希望用戶選擇某一項，可以用 disabled 屬性禁用某個 option：
<option value="0" disabled selected>請選擇城市</option>
這常用于提示用戶進行選擇，而不是直接提交默認值。
如果選項很多，還可以用 optgroup 來對選項進行分組：
<select> <optgroup label="一線城市"> <option value="1">北京</option> <option value="2">上海</option> </optgroup> <optgroup label="二線城市"> <option value="3">成都</option> <option value="4">杭州</option> </optgroup> </select>
這樣能讓選項更清晰易讀。
基本上就這些。雖然看起來簡單，但實際開發中還是要注意一些小點，比如默認值是否合理、有沒有遺漏禁用狀態、是否需要分組等等。把這些細節處理好，用戶體驗會更自然。
