When we have more options in a listbox, we need to group them under different heads. We can use optgroup to manage such group of options.
Here there are three optgroups Books, Publications and Articles.
<select id=material name=material class='form-control'>
<optgroup label="Books">
<option value=b1>Book 1</option>
<option value=b2>Book 2</option>
<option value=b3>Book 3</option>
</optgroup>
<optgroup label="Publications">
<option value=pb1>Publications 1</option>
<option value=pb2>Publications 2</option>
<option value=pb3>Publications 3</option>
</optgroup>
<optgroup label="Articles">
<option value=a1>Articles 1</option>
<option value=a2>Articles 2</option>
<option value=a3>Articles 3</option>
</optgroup>
</select>
Attributes of <optgroup>
disabled: All options of the group will be disabled if it is set.
Label : Lable to be used for the group of options.
Example
The group of options under optgroup Publications are disabled. You can't select any Publications
<select id=material name=material class='form-control'>
<optgroup label="Books">
<option value=b1>Book 1</option>
<option value=b2>Book 2</option>
<option value=b3>Book 3</option>
</optgroup>
<optgroup label="Publications" disabled>
<option value=pb1>Publications 1</option>
<option value=pb2>Publications 2</option>
<option value=pb3>Publications 3</option>
</optgroup>
<optgroup label="Articles">
<option value=a1>Articles 1</option>
<option value=a2>Articles 2</option>
<option value=a3>Articles 3</option>
</optgroup>
</select>
Managing OPTGROUP attributes
We can make a group of options of a dropdown listbox by using JQuery click event of a radio button. Options are grouped under <OPTGROUP> tag.
multiple selection options of list box are handled using PHP
Managing Listbox using JQuery
