HTML - selected 属性

HTML selected 属性用于标记选择列表中的默认选项在页面加载时已被选中。

此功能突出显示选项列表中的默认或首选选项，使用户交互更简单。它被 Web 开发人员用来改善用户体验，并通过立即识别下拉列表中的默认选择，使用户更容易浏览和在 Web 表单和界面上做出决策。

语法

<option selected></option>

应用于

以下列出的元素允许使用 HTML selected 属性。

元素	描述
<option>	HTML <option> 标签用于定义由 <datalist> 标签指定的自动完成数据的项目，或由 <select> 标签定义的下拉列表的项目。

HTML selected 属性示例

下面的例子将说明 HTML selected 属性在哪里以及如何使用这个属性！

将选项设置为列表中已选中的选项

执行后，母语默认设置为印地语。

<!DOCTYPE html>
<html>

<head>
    <title>HTML 'selected' attribute</title>
</head>

<body>
    <h3>Example of the HTML 'selected' attribute</h3>
    <p>Choose your mother tongue:</p>
    <select>
        <option value="">--Choose your option--</option>
        <option value="" selected>Hindi</option>
        <option value="">Tamil</option>
        <option value="">Telugu</option>
    </select>
</body>

</html>

在按钮功能中使用 selected 属性

执行以下代码时，“HTML”默认选中。单击“设置选中”按钮后，选项将更新为“Angular”。

<!DOCTYPE html>
<html>

<head>
    <title>HTML 'selected' attribute</title>
</head>

<body>
    <h3>Example of the HTML 'selected' attribute</h3>
    <p>Select any frontend technology that you know:</p>
    <select>
        <option value="">--Choose your option--</option>
        <option value="" id='html' selected>HTML</option>
        <option value="" id='css'>CSS</option>
        <option value="" id='javascript'>JavaScript</option>
        <option value="" id='angular'>Angular</option>
        <option value="" id='react'>React</option>
    </select>
    <button onclick="Add()">Set selected</button>
    <script>
        function Add() {
         document.getElementById('angular').selected = true;
        }
    </script>
</body>

</html>

支持的浏览器

属性
selected	是	是	是	是	是

html_attributes_reference.htm

打印页面