如何设置 HTML 'select' 元素的默认值？

要设置 HTML <select> 元素的默认值，我们可以使用 HTML 的 selected 属性。当您希望在下拉菜单中显示预定义值时，可以使用此属性。

在这篇文章中，我们有一个包含四个选项的下拉列表，我们的任务是为 HTML select 元素设置默认值。

设置 select 元素默认值的步骤

我们将按照以下步骤设置 HTML select 元素的默认值

  • 我们使用 select 标签创建了一个下拉列表，然后使用 option 标签向列表中添加了选项。
  • 我们在希望设置为下拉列表默认值的选项上使用了 **selected** 属性。
  • 我们还使用了 disabled 和 hidden 属性。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 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告