Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add Option group in HTML select?

Tags:

html

How can I add option group in HTML select tag? I want to categories my option list with option group....how can I use it?

Here is an example

<select>
<!-- First category option -->
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
<!-- Second catgory option -->
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select> 
like image 660
Kashif Hanif Avatar asked Dec 25 '12 08:12

Kashif Hanif


People also ask

How do you create groups of options in HTML?

How to create a group of related options in a drop-down list using HTML ? 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.

How do I make a list of choices in HTML?

The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

What element is used to group options in a select input?

The <optgroup> tag is used to group related options in a <select> element (drop-down list).

Can I use HTML tags in the options for select elements?

No, you cannot.


1 Answers

By using the optgroup tag. Here is an example:

<select name="browser">

    <optgroup label="Firefox">
      <option value="2.0 or higher">
        Firefox 2.0 or higher
      </option>
      <option value="1.5.x">Firefox 1.5.x</option>
      <option value="1.0.x">Firefox 1.0.x</option>
    </optgroup>

    <optgroup label="Microsoft Internet Explorer">
      <option value="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </option>
      <option value="6.x">Microsoft Internet Explorer 6.x</option>
      <option value="5.x">Microsoft Internet Explorer 5.x</option>
      <option value="4.x">Microsoft Internet Explorer 4.x</option>
    </optgroup>

    <optgroup label="Opera">
      <option value="9.0 or higher">Opera 9.0 or higher</option>
      <option value="8.x">Opera 8.x</option>
      <option value="7.x">Opera 7.x</option>
    </optgroup>

    <option>Safari</option>
    <option>Other</option>

</select>

hope it helps.

like image 106
Kashif Hanif Avatar answered Dec 08 '22 01:12

Kashif Hanif