Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify that an option should be pre-selected when the page loads in HTML?
Use the selected attribute to specify that an option should be pre-selected when the page loads in HTML. The selected attribute is a boolean attribute that, when present on an <option> element within a <select> dropdown, makes that option the default choice displayed to users.
Syntax
Following is the syntax for the selected attribute −
<option value="optionValue" selected>Option Text</option>
The selected attribute can also be written in XHTML format as selected="selected", but in HTML5, the boolean form is preferred.
How It Works
When the browser loads a page containing a <select> element, it looks for any <option> with the selected attribute. If found, that option becomes the default selection. If no option has the selected attribute, the first option in the list is selected by default.
Only one option should have the selected attribute in a single-select dropdown. For multiple-select dropdowns (using multiple attribute), multiple options can be pre-selected.
Example − Single Pre-selected Option
Following example demonstrates how to pre-select an option in a dropdown list −
<!DOCTYPE html>
<html>
<head>
<title>HTML selected attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Course Selection</h2>
<p>Here's the list of subjects. Select any one:</p>
<form>
<select name="dropdown">
<option value="Computer Architecture" selected>Computer Architecture</option>
<option value="Java">Java</option>
<option value="Discrete Mathematics">Discrete Mathematics</option>
</select>
</form>
</body>
</html>
The output shows "Computer Architecture" as the pre-selected option when the page loads −
Course Selection Here's the list of subjects. Select any one: [Computer Architecture ?] (dropdown showing Computer Architecture selected)
Example − Multiple Pre-selected Options
For multiple-select dropdowns, you can pre-select several options using the selected attribute −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Selected Options</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Select Your Skills</h2>
<p>Choose multiple skills (Hold Ctrl/Cmd while clicking):</p>
<form>
<select name="skills" multiple size="5">
<option value="HTML" selected>HTML</option>
<option value="CSS" selected>CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="Java">Java</option>
</select>
</form>
</body>
</html>
Both "HTML" and "CSS" appear as pre-selected when the page loads −
Select Your Skills Choose multiple skills (Hold Ctrl/Cmd while clicking): [HTML ] (highlighted) [CSS ] (highlighted) [JavaScript] [Python ] [Java ]
Example − Dynamic Selection with JavaScript
You can also set the selected option dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Programming Languages</h2>
<select id="languages" name="language">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
<br><br>
<button onclick="selectJavaScript()">Select JavaScript</button>
<button onclick="selectPython()">Select Python</button>
<script>
function selectJavaScript() {
document.getElementById("languages").value = "javascript";
}
function selectPython() {
document.getElementById("languages").value = "python";
}
</script>
</body>
</html>
The buttons allow dynamic selection of options without using the selected attribute in HTML −
Programming Languages [HTML ?] [Select JavaScript] [Select Python] (Clicking buttons changes the dropdown selection)
Key Points
-
The
selectedattribute is a boolean attribute − its presence makes the option selected, regardless of its value. -
Only use one
selectedattribute per<select>element unless it has themultipleattribute. -
If no option has the
selectedattribute, the first option is selected by default in single-select dropdowns. -
The
selectedattribute can be manipulated with JavaScript using theselectedproperty or by setting thevalueof the select element. -
In XHTML, write it as
selected="selected", but HTML5 allows the shorterselectedsyntax.
Browser Compatibility
The selected attribute is supported by all modern browsers and has been part of the HTML specification since the early versions. It works consistently across Chrome, Firefox, Safari, Edge, and Internet Explorer.
Conclusion
The selected attribute provides a simple way to pre-select options in dropdown lists when the page loads. Use it on a single <option> for regular dropdowns, or on multiple options when using multiple selection. This attribute enhances user experience by providing sensible defaults in forms.
209 Views
