Open In App

How to create a group of related options in a drop-down list using HTML ?

Last Updated : 20 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

We can define a group of related options in a drop-down list by using the <optgroup> Tag tag is used to create a group of same category options in a drop-down list. The tag is required when there is a long list of items.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to define a group of
        related options in a
        drop-down list?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
  
        .geeks {
            font-size: 17px;
        }
    </style>
</head>
  
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
    <h2>
        How to define a group of related
        options in a drop-down list
    </h2>
    <select>
        <optgroup label="Programming Languages">
            <option value="C">C</option>
            <option value="C++">C++</option>
            <option value="Java">Java
        </optgroup>
        <optgroup label="Scripting Language">
            <option value="JavaScript">JavaScript</option>
            <option value="PHP">PHP</option>
            <option value="Shell">Shell</option>
        </optgroup>
    </select>
</body>
  
</html>


Output:

Supported Browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Similar Reads

Create a drop-down list that options fetched from a MySQL database in PHP
In many scenarios, we may need to create a dropdown input that can display all the options consistent with the current state of the database. This form of input is used many times in real life and the following examples may help to understand the same. A set of students who have unique registration numbers.A set of branch names and their branch ids
4 min read
How to add options to a drop-down list using jQuery?
Given an HTML document with a drop-down list menu and our task is to add more options to the drop-down list using jQuery. Approach : To add more option to the existing drop-down list using the append() method : var options = { val1: 'C#', val2: 'PHP' }; var selectOption = $('#programmingLanguage'); $.each(options, function (val, text) { selectOptio
2 min read
How to select first element in the drop-down list using jQuery ?
Given a drop-down list containing options elements, the task is to get the first element of the select element using JQuery. Approach 1: Select the first element of &lt;select&gt; element using the jQuery selector.Use the prop() method to get access to properties of that particular element.Change the selectedIndex property to 0 to get access to the
2 min read
How to generate a drop down list of timezone using PHP ?
The timezone_identifiers_list() function is used to generate a dropdown list of timezone with PHP. This function is used to return an indexed array containing all the timezone identifiers. The datetimezone object is sent as a parameter to the timezone_identifiers_list() function and it returns an indexed array on success or False on failure. This f
3 min read
How to change font style using drop-down list in JavaScript ?
To change or set a font style for certain text, the fontFamily CSS property needs to be changed. The fontFamily property sets or returns a list of font-family names for text in an element. Syntax: object.style.fontFamily = "font" To change the font style by option dropdown: The font values can be passed in option tags using option value. Syntax:
2 min read
How to Change Font Size using drop-down List in JavaScript ?
To change or set a font size for certain text, the fontSize property needs to be changed. The fontSize property sets or returns a list of fontSize names for text in an element. CSS font-size property is used to specify the font's height and size. It affects the size of an element's text. It has a medium default value and can be applied to any eleme
3 min read
How to get selected text from a drop-down list using jQuery?
In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method The val() method is an inbuilt method in jQuery t
2 min read
How to change selected value of a drop-down list using jQuery?
In this article, we are going to change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. To achieve this feature you can use different methods, some of those methods are li
3 min read
How to specify that a group of related form elements should be disabled using HTML?
In this article, we will learn how to specify that a group of related form elements should be disabled using HTML. When the disabled attribute is present, it specifies that the input field is disabled. We can not write any content in a disabled input field. Approach: We will be using the disabled attribute with the &lt;fieldset&gt; element. The dis
1 min read
How to define a drop-down list in HTML5 ?
In this article, we define a Drop-Down List By using the &lt;select&gt; Element in the Document. This tag is used to create a drop-down list. The &lt;select&gt; tag contains &lt;option&gt; tag to display the available option of drop-down list.Note: The tag is used in a form to receive user response.Syntax: &lt;select&gt; &lt;option&gt; &lt;option
1 min read