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 text Property
The HTML DOM option text property allows you to retrieve and modify the text content of an <option> element within a <select> dropdown. This property is useful for dynamically updating option labels without recreating the entire select element.
Syntax
Following is the syntax for getting the text value −
optionElement.text
Following is the syntax for setting the text value −
optionElement.text = "newText"
Return Value
The property returns a string representing the text content of the option element. When setting, it accepts a string value that becomes the new text for the option.
Example − Getting Option Text
Following example demonstrates how to retrieve the text of a selected option −
<!DOCTYPE html>
<html>
<head>
<title>Getting Option Text</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Subject</h2>
<select id="subjects" onchange="showSelectedText()">
<option value="phy">Physics</option>
<option value="chem">Chemistry</option>
<option value="math">Mathematics</option>
<option value="bio">Biology</option>
</select>
<p id="result">Selected: None</p>
<script>
function showSelectedText() {
var select = document.getElementById("subjects");
var selectedOption = select.options[select.selectedIndex];
document.getElementById("result").innerHTML = "Selected: " + selectedOption.text;
}
</script>
</body>
</html>
The output shows the text of the selected option −
Select Your Favorite Subject [Physics dropdown menu] Selected: Physics
Example − Modifying Option Text
Following example shows how to change the text of specific options dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Modifying Option Text</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<select id="courses">
<option>HTML Basics</option>
<option>CSS Basics</option>
<option>JavaScript Basics</option>
</select>
<br><br>
<button onclick="upgradeToAdvanced()">Upgrade to Advanced Courses</button>
<button onclick="resetToBasics()">Reset to Basics</button>
<script>
function upgradeToAdvanced() {
var select = document.getElementById("courses");
select.options[0].text = "HTML5 Advanced";
select.options[1].text = "CSS3 Advanced";
select.options[2].text = "JavaScript ES6+";
}
function resetToBasics() {
var select = document.getElementById("courses");
select.options[0].text = "HTML Basics";
select.options[1].text = "CSS Basics";
select.options[2].text = "JavaScript Basics";
}
</script>
</body>
</html>
Clicking "Upgrade to Advanced Courses" changes all option texts to advanced versions, while "Reset to Basics" restores the original text −
Course Selection [HTML Basics dropdown menu] [Upgrade to Advanced Courses] [Reset to Basics] After clicking upgrade: [HTML5 Advanced dropdown menu]
Example − Working with Selected Options
Following example demonstrates how to modify only the currently selected option −
<!DOCTYPE html>
<html>
<head>
<title>Modify Selected Option</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<select id="languages">
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>JavaScript</option>
</select>
<br><br>
<button onclick="markAsFavorite()">Mark Selected as Favorite</button>
<button onclick="removeStars()">Remove All Stars</button>
<p id="status"></p>
<script>
function markAsFavorite() {
var select = document.getElementById("languages");
var selectedOption = select.options[select.selectedIndex];
if (!selectedOption.text.includes("?")) {
selectedOption.text = selectedOption.text + " ?";
document.getElementById("status").innerHTML = "Marked '" + selectedOption.text + "' as favorite!";
}
}
function removeStars() {
var select = document.getElementById("languages");
for (var i = 0; i < select.options.length; i++) {
select.options[i].text = select.options[i].text.replace(" ?", "");
}
document.getElementById("status").innerHTML = "All stars removed!";
}
</script>
</body>
</html>
This example adds a star to the selected language and provides functionality to remove all stars −
Programming Languages [Python dropdown menu] [Mark Selected as Favorite] [Remove All Stars] After marking Python as favorite: [Python ? dropdown menu] Marked 'Python ?' as favorite!
Key Points
The
textproperty affects only the display text of the option, not itsvalueattribute.Changes to option text are immediately reflected in the dropdown without requiring a page refresh.
The property works with both static options in HTML and dynamically created options via JavaScript.
Use
select.options[index].textto access specific options by their position in the list.Use
select.options[select.selectedIndex].textto work with the currently selected option.
Conclusion
The HTML DOM option text property provides a simple way to read and modify the display text of dropdown options dynamically. It's particularly useful for creating interactive forms where option labels need to be updated based on user actions or external data, without affecting the underlying option values sent to the server.
197 Views
