HTML - selected 属性_HTML 菜鸟教程

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>

在运行按钮时使用选定的属性

当执行以下代码时，默认情况下会选择“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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - scope 属性 HTML - shape 属性 >>