如何設定HTML 'select' 元素的預設值?


要設定HTML <select> 元素的預設值,我們可以使用HTML 的selected 屬性。當您想在下拉選單中顯示預定義值時,可以使用此屬性。

在本文中,我們有一個包含四個選項的下拉列表,我們的任務是設定HTML HTML select 元素的預設值。

設定select元素預設值的步驟

我們將遵循以下步驟來設定HTML select 元素的預設值

  • 我們使用select標籤建立了一個下拉列表,然後使用 option 標籤向列表中添加了選項。
  • 我們在希望將其設定為下拉列表預設值的選項上使用了selected 屬性。
  • 我們還使用了disabledhidden 屬性。disabled屬性阻止選擇該選項,hidden屬性則隱藏該選項。當您想顯示說明但不想將其包含在選項中時,這很有用。

示例

這是一個完整的示例程式碼,它實現了上述步驟,使用selected 屬性設定HTML <select> 元素的預設值。

<!DOCTYPE html>
<html>
<body>
    <h3>
        To set the default value for an 
        HTML select element
    </h3>
    <p>
        In this example we have used HTML
        <strong>selected</strong> attribute
        to set the default value for HTML
        select element.
    </p>
    <select name="courses">
        <option value="none" selected disabled hidden>
            Choose any option...
        </option>
        <option value="Java">Java</option>
        <option value="Discrete Mathematics">
            Discrete Mathematics
        </option>
        <option value="Chemistry">Chemistry</option>
        <option value="IOT">IOT</option>
    </select>
</body>
</html>

結論

在本文中,我們討論瞭如何使用selected 屬性設定HTML <select> 元素的預設值。

更新於:2024年9月20日

415 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.