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

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

在本文中，我们有一个包含四个选项的下拉列表，我们的任务是设置HTML 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日

415 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告