Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a group of related options in a drop-down list using HTML
Overview
A group of related options is a group in which all the items lie under the same category. For example apple, banana, kiwi all lie under the same group called fruits and BMW, Audi, G-Wagon these all lie under a category of cars. So sometimes to give a good user experience we need to define a category under which the other options lie. For this there is a tag in HTML to provide a feature, to group the same options under a category known as “<optgroup>” tag.
Syntax
The syntax to define the group of related options is −
<optgroup label=""> <option value=""></option> <option value=""></option> </optgroup>
The label attribute in <optgroup> tag allows us to define a name of the category under which all the options lie.
Algorithm
Step 1 − Create a HTML boilerplate code on your code editor.
Step 2 −To create a dropdown list use select tag.
<select name="" id=""> </select>
Step 3 − Now use <optgroup> tag, this tag allows options to be created under a single category. Also inherit some <option> tag also which will create the options under a category. Write the name of the category inside the label attribute
<optgroup label=""> <option value=""></option> <option value=""></option> <option value=""></option> </optgroup>
Step 4 − The dropdown-list with a group of related options is created successfully.
Example
In this example, the HTML <optgroup> tag is used to create a group of the related options. The label attribute inside the <optgroup> tag acts as a heading for the options which belong to the same category. In this example we had just created three groups for the options but if we want to add more options to the category simply we can inherit the HTML <option> tag in the <optgroup> tag. The <optgroup> tag also contains an attribute named as disabled. As the name disable defines that it will disable a certain group of options on which the <optgroup> tag contains the disable attribute.
<html>
<head>
<title>Create a group of related options</title>
</head>
<body>
<select name="" id="">
<option value="">--Choose options--</option>
<optgroup label="Group 1">
<option value="">option 1</option>
<option value="">option 1</option>
<option value="">option 1</option>
</optgroup>
<optgroup label="Group 2">
<option value="">option 2</option>
<option value="">option 2</option>
<option value="">option 2</option>
</optgroup>
<optgroup label="Group 3">
<option value="">option 3</option>
<option value="">option 3</option>
<option value="">option 3</option>
</optgroup>
</select>
</body>
</html>
The below image shows the output of the example, in which as we can see there are three groups as “Group 1”, “Group 2”, and “Group 3” for which it has “option1”, “option 2” and “option 3” as options respectively.
Conclusion
As in our room the shelves are used to organize our things properly and in a well mannered way. In the same way the <optgroup> tag makes the option assembled in a systematic manner which makes a User Experience (UX) better. In the HTML tags are named in a manner such that they can be understood with their name as on seeing <optgroup> tag that is made from using two words “ option + group = optgroup ”.
381 Views
