<optgroup> Grouping of options of listbox

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.
DEMO of managing OPTGROUP disabled option.
multiple selection options of list box are handled using PHP Managing Listbox using JQuery
Dropdown Listbox in form Checkbox in a form Managing font size and style

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer