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
HTML DOM Option defaultSelected Property
The HTML DOM Option defaultSelected property returns a boolean value indicating whether an option element was selected by default when the page loaded. This property reflects the presence of the selected attribute in the HTML markup, not the current selection state.
Syntax
Following is the syntax for the defaultSelected property −
optionObject.defaultSelected
Return Value
The defaultSelected property returns −
trueif the option was selected by default (has theselectedattribute)falseif the option was not selected by default
Basic Example
Following example demonstrates the defaultSelected property with a simple dropdown −
<!DOCTYPE html>
<html>
<head>
<title>DOM Option defaultSelected Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select your favorite subject:</h2>
<select id="subjects">
<option value="physics">Physics</option>
<option value="maths" selected>Mathematics</option>
<option value="chemistry">Chemistry</option>
<option value="english">English</option>
</select>
<br><br>
<button onclick="checkDefaultSelected()">Check Default Selected Options</button>
<div id="result"></div>
<script>
function checkDefaultSelected() {
var select = document.getElementById("subjects");
var result = document.getElementById("result");
var output = "<h3>Default Selected Status:</h3>";
for (var i = 0; i < select.options.length; i++) {
var option = select.options[i];
output += option.text + ": " + option.defaultSelected + "<br>";
}
result.innerHTML = output;
}
</script>
</body>
</html>
The output shows the defaultSelected status for each option −
Default Selected Status: Physics: false Mathematics: true Chemistry: false English: false
Comparing defaultSelected vs selected
The defaultSelected property differs from the selected property. The defaultSelected reflects the original HTML markup, while selected reflects the current selection state.
Example
<!DOCTYPE html>
<html>
<head>
<title>defaultSelected vs selected</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose a programming language:</h2>
<select id="languages" onchange="showDifference()">
<option value="html">HTML</option>
<option value="css" selected>CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
</select>
<br><br>
<button onclick="showDifference()">Compare Properties</button>
<div id="comparison"></div>
<script>
function showDifference() {
var select = document.getElementById("languages");
var comparison = document.getElementById("comparison");
var output = "<h3>Property Comparison:</h3>";
for (var i = 0; i < select.options.length; i++) {
var option = select.options[i];
output += "<p><strong>" + option.text + ":</strong><br>";
output += "defaultSelected: " + option.defaultSelected + "<br>";
output += "selected: " + option.selected + "</p>";
}
comparison.innerHTML = output;
}
</script>
</body>
</html>
When you change the selection and click the button, you'll notice that defaultSelected remains unchanged (CSS stays true), while selected reflects the current choice.
Practical Use Case
The defaultSelected property is useful for creating reset functionality or detecting if a form has been modified from its initial state.
Example − Form Reset Detection
<!DOCTYPE html>
<html>
<head>
<title>Form Reset Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection Form</h2>
<form id="courseForm">
<label for="course">Select a course:</label>
<select id="course" name="course">
<option value="">-- Choose a course --</option>
<option value="html">HTML Basics</option>
<option value="css" selected>CSS Fundamentals</option>
<option value="js">JavaScript Essentials</option>
</select>
<br><br>
<button type="button" onclick="resetToDefault()">Reset to Default</button>
<button type="button" onclick="checkIfModified()">Check if Modified</button>
</form>
<div id="status"></div>
<script>
function resetToDefault() {
var select = document.getElementById("course");
for (var i = 0; i < select.options.length; i++) {
select.options[i].selected = select.options[i].defaultSelected;
}
document.getElementById("status").innerHTML = "<p style='color: green;'>Form reset to default values!</p>";
}
function checkIfModified() {
var select = document.getElementById("course");
var isModified = false;
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].selected !== select.options[i].defaultSelected) {
isModified = true;
break;
}
}
var message = isModified ?
"<p style='color: orange;'>Form has been modified from default state.</p>" :
"<p style='color: blue;'>Form is in its default state.</p>";
document.getElementById("status").innerHTML = message;
}
</script>
</body>
</html>
This example shows how defaultSelected can be used to implement form reset functionality and detect modifications from the original state.
Key Points
The defaultSelected property is read-only and cannot be changed via JavaScript
It reflects the
selectedattribute in the original HTML markupUnlike the
selectedproperty, defaultSelected never changes after page loadUseful for form validation and reset operations
Returns a boolean value (true/false)
Browser Compatibility
The defaultSelected property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early versions.
Conclusion
The HTML DOM Option defaultSelected property provides a way to identify which options were originally selected in a dropdown list. It's particularly useful for form reset functionality and determining if a form has been modified from its initial state, making it a valuable tool for web form management.
148 Views
