在 HTML 中选择默认值

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 HTML 中选择默认值

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文将讨论为 HTML <select> 元素选择默认值的两种方法。

使用 `selected="selected"` 为 HTML `<select>` 元素选择默认值

我们可以使用 selected="selected" 选项来选择 HTML 代码中的默认值。我们在 <option> 标签中写入 selected 属性。我们可以将 selected 属性的值设置为 selected 以在首次加载网页时默认选择特定选项。它在 HTML 中称为布尔属性。预先选择的选项将首先显示在下拉列表中。此属性只能用于 <option> 元素。它支持 Google Chrome、Internet Explorer、Firefox、Opera 等网络浏览器。

例如，在 HTML 正文中，创建一个 <select> 标记，然后在其中创建五个选项。为每个选项的 value 属性写下 1-5 的数字。在每个选项的 <option> 标签之间写入从 One 到 Five 的文本。接下来，在打开 <option> 标签后，将 selected 属性写入值 selected，你希望选择该特定值作为默认值（以下示例中的选项 3）。最后，关闭 <select> 标签。

下面的示例使用 select=selected 方法在下拉列表中选择默认值。我们创建了一个下拉列表，让我们可以从 One 到 Five 中选择值。当页面重新加载时，默认情况下会加载选项 Three，因为我们已使用 selected 属性将元素指定为默认值。

示例代码：

<body>
    <select>
        <option  value="1">One</option>
        <option  value="2">Two</option>
        <option  selected="selected"  value="3">Three</option>
        <option  value="4">Four</option>
        <option  value="5">Five</option>
    </select>
</body>

使用 `<option selected>` 为 HTML `<select>` 元素选择默认值

我们可以使用 <option selected> 选项来选择 HTML 中的默认值。这个过程也有点类似于第一个。它也是一个布尔属性。<select> 元素主要用于收集用户的输入。我们写在 <select> 元素中的 <option> 标签定义了下拉列表中包含的可用项目。我们可以在特定的 <option> 标签中写入 selected 选项，以将该选项指定为默认的选定选项。

例如，在 HTML 正文中，创建一个 <select> 标记，后跟 <option> 标记，如上述方法中所述。在下一行中，指定从 1-5 到选项标签的值并关闭选项标签。重复这个过程五次。然后，在第二个 <option> 标签后面写上 <selected> 以将其选为默认值。最后，关闭 <select> 标签。

下面的示例使用 <option selected> 选项来选择默认值。当页面加载时，我们可以在下拉列表中看到默认加载选项 2，因为我们在第二个元素的情况下使用了 <option selected>。

示例代码：

<body>
    <select>
        <option> 1 </option>
        <option  selected> 2 </option>
        <option> 3 </option>
        <option> 4 </option>
        <option> 5 </option>
    </select>
</body>

上一篇：在 HTML 中旋转图像

下一篇：HTML 格式中在图像上单击或悬停时进行放大

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享