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 preselect a value in a dropdown list of items in HTML forms?
With HTML, you can easily create a simple dropdown list of items to get user input in HTML forms. A select box, also called a dropdown box, provides an option to list down various options in the form of a dropdown list.
You can also preselect a value in dropdown list of items in HTML forms. For that, add the selected attribute in the <option> tag for the value you want to preselect.
Syntax
Following is the syntax to preselect an option in a dropdown list −
<select name="dropdown"> <option value="option1">Option 1</option> <option value="option2" selected>Option 2</option> <option value="option3">Option 3</option> </select>
The selected attribute is a boolean attribute that specifies which option should be pre-selected when the page loads. Only one option can be selected at a time in a single-select dropdown.
Basic Example
Following example shows how to preselect a value in a dropdown list −
<!DOCTYPE html>
<html>
<head>
<title>Preselected Dropdown</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Select a Programming Language</h2>
<form>
<label for="languages">Choose a language:</label>
<select name="dropdown" id="languages">
<option value="Java" selected>Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="C++">C++</option>
</select>
</form>
</body>
</html>
In this example, "Java" will be preselected when the page loads. The dropdown will show "Java" as the default selected option −
Select a Programming Language Choose a language: [Java ?] (Java is preselected)
Multiple Options Example
Following example demonstrates a dropdown with more options and a different preselected value −
<!DOCTYPE html>
<html>
<head>
<title>Course Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Choose Your Course</h2>
<form action="/submit-course" method="post">
<label for="course">Select a course:</label>
<select name="course" id="course">
<option value="">-- Please choose an option --</option>
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="js" selected>JavaScript</option>
<option value="react">React.js</option>
<option value="node">Node.js</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>
In this example, "JavaScript" is preselected. The form also includes a placeholder option and a submit button for better user experience −
Choose Your Course Select a course: [JavaScript ?] [Submit] (JavaScript is preselected)
Using Selected with JavaScript
You can also dynamically set the selected option using JavaScript by modifying the selected property −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Dropdown Selection</h2>
<select id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select>
<button onclick="selectBanana()">Select Banana</button>
<button onclick="selectMango()">Select Mango</button>
<script>
function selectBanana() {
document.getElementById("fruits").value = "banana";
}
function selectMango() {
document.getElementById("fruits").value = "mango";
}
</script>
</body>
</html>
The JavaScript functions change the selected option dynamically when buttons are clicked −
Dynamic Dropdown Selection [Apple ?] [Select Banana] [Select Mango] (Clicking buttons changes the selected option)
Multiple Selection Dropdown
For multiple selection dropdowns using the multiple attribute, you can preselect multiple options −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Select Multiple Skills</h2>
<form>
<label for="skills">Choose your skills (hold Ctrl to select multiple):</label>
<select name="skills" id="skills" multiple size="5">
<option value="html" selected>HTML</option>
<option value="css" selected>CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
</form>
</body>
</html>
In this example, both "HTML" and "CSS" are preselected. Users can select additional options by holding Ctrl (or Cmd on Mac) while clicking −
Select Multiple Skills Choose your skills (hold Ctrl to select multiple): [HTML] ? selected [CSS] ? selected [JavaScript] [Python] [Java]
Best Practices
When using preselected values in dropdown lists, consider these best practices −
-
User Experience − Only preselect values that make sense as defaults or are commonly chosen by users.
-
Form Validation − Include a placeholder option like "-- Select an option --" when user selection is required.
-
Accessibility − Always use proper
<label>elements associated with your select boxes for screen reader compatibility. -
Single Selection − In standard dropdowns, only one option can have the
selectedattribute. If multiple options have it, the browser will select the last one.
Conclusion
To preselect a value in an HTML dropdown list, add the selected attribute to the desired <option> element. This makes the option appear as the default choice when the page loads, improving user experience by providing sensible defaults in forms.
6K+ Views
