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 create a group of related options in a drop-down list using HTML
The <optgroup> tag in HTML allows you to create logical groups of related options within a dropdown list. This improves user experience by organizing options into categories, making it easier for users to find and select the desired option from long lists.
Syntax
Following is the syntax for the <optgroup> tag
<select>
<optgroup label="category_name">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</optgroup>
</select>
The label attribute specifies the category name that appears as a heading for the grouped options. The <option> tags nested inside define the individual choices within that category.
Basic Example
Following example demonstrates creating a dropdown with grouped options for different categories of items
<!DOCTYPE html>
<html>
<head>
<title>Basic Optgroup Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Item</h2>
<select name="items" style="padding: 8px; font-size: 14px;">
<option value="">--Choose an option--</option>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="broccoli">Broccoli</option>
<option value="spinach">Spinach</option>
</optgroup>
<optgroup label="Dairy">
<option value="milk">Milk</option>
<option value="cheese">Cheese</option>
<option value="yogurt">Yogurt</option>
</optgroup>
</select>
</body>
</html>
The output displays a dropdown with three distinct categories, each containing related options. The category labels appear as non-selectable headers in the dropdown list.
--Choose an option-- Fruits Apple Banana Orange Vegetables Carrot Broccoli Spinach Dairy Milk Cheese Yogurt
Using the Disabled Attribute
The disabled attribute can be applied to <optgroup> tags to prevent users from selecting any options within that group. This is useful for temporarily unavailable categories or administrative purposes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Disabled Optgroup Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Vehicle Selection</h2>
<select name="vehicle" style="padding: 8px; font-size: 14px; width: 200px;">
<option value="">--Select Vehicle--</option>
<optgroup label="Cars">
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes</option>
</optgroup>
<optgroup label="Motorcycles" disabled>
<option value="harley">Harley Davidson</option>
<option value="yamaha">Yamaha</option>
<option value="honda">Honda</option>
</optgroup>
<optgroup label="Trucks">
<option value="ford">Ford F-150</option>
<option value="chevrolet">Chevrolet Silverado</option>
</optgroup>
</select>
<p style="color: #666; font-size: 12px;">Note: Motorcycle options are currently disabled.</p>
</body>
</html>
In this example, the "Motorcycles" group is disabled, making those options unselectable while still visible to users
--Select Vehicle-- Cars BMW Audi Mercedes Motorcycles (grayed out, unselectable) Harley Davidson (grayed out) Yamaha (grayed out) Honda (grayed out) Trucks Ford F-150 Chevrolet Silverado
Practical Example with Form Submission
Following example shows how grouped options work in a complete form with JavaScript handling
<!DOCTYPE html>
<html>
<head>
<title>Complete Optgroup Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Registration</h2>
<form onsubmit="return false;">
<label for="course" style="font-weight: bold;">Select a Course:</label><br>
<select id="course" name="course" style="padding: 10px; font-size: 14px; width: 250px; margin: 10px 0;">
<option value="">--Choose Your Course--</option>
<optgroup label="Programming Languages">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</optgroup>
<optgroup label="Web Technologies">
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="react">React.js</option>
</optgroup>
<optgroup label="Databases">
<option value="mysql">MySQL</option>
<option value="mongodb">MongoDB</option>
<option value="postgresql">PostgreSQL</option>
</optgroup>
</select><br>
<button type="button" onclick="showSelection()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px;">Submit</button>
<p id="result" style="margin-top: 15px; font-weight: bold;"></p>
</form>
<script>
function showSelection() {
var courseSelect = document.getElementById("course");
var selectedValue = courseSelect.value;
var selectedText = courseSelect.options[courseSelect.selectedIndex].text;
var resultDiv = document.getElementById("result");
if (selectedValue) {
resultDiv.innerHTML = "Selected Course: " + selectedText + " (Value: " + selectedValue + ")";
resultDiv.style.color = "green";
} else {
resultDiv.innerHTML = "Please select a course!";
resultDiv.style.color = "red";
}
}
</script>
</body>
</html>
When a user selects an option and clicks Submit, JavaScript displays the selected course information.
Course Registration Select a Course: [Dropdown showing grouped options] [Submit Button] Selected Course: JavaScript (Value: javascript)
Best Practices
-
Meaningful labels Use clear, descriptive category names that help users understand the grouping.
-
Logical grouping Only group options that truly belong together conceptually.
-
Consistent values Always provide meaningful
valueattributes for options, even if they match the display text. -
Accessibility Screen readers announce optgroup labels, improving navigation for users with disabilities.
-
Limit nesting HTML does not support nested optgroups, so keep your grouping structure flat.
Browser Support
The <optgroup> tag is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The visual presentation may vary slightly between browsers, but the functionality remains consistent.
Conclusion
The <optgroup> tag enhances dropdown lists by organizing related options into logical categories. This improves user experience, especially with long option lists, and provides better accessibility. Use meaningful category labels and consider the disabled attribute when certain option groups are temporarily unavailable.
728 Views
