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


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

在這篇文章中,我們有一個包含四個選項的下拉列表,我們的任務是為 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日

413 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.