How to group entries in a HTML form dropdown

May 262014

In some HTML forms we may find dropdown (<select>) elements with a high number of entries. To make the dropdown more user friendly, the entries might be grouped by some relevant criteria.

Using static HTML to group entries in a dropdown

Let’s use a sample form with a <select> dropdown to choose a country from a list. The HTML code of the dropdown could be like this:


<select name="idcountry" id="idcountry">
    <option value="DEF">-- Select country --</option>
    <option value="AFG">Afghanistan</option>
    <option value="ALB">Albania</option>
    <option value="DZA">Algeria</option>
    <option value="AGO">Angola</option>
...
</select>

<option value="DEF">-- Select country --</option>

<option value="AFG">Afghanistan</option>

<option value="ALB">Albania</option>

<option value="DZA">Algeria</option>

<option value="AGO">Angola</option>

...

</select>

But countries can be grouped using different criteria: The continent they belong to, the official language,…

The tag <optgroup> can be added to the HTML code to group countries by the chosen criterion. For instance, in order to group countries by language, we would rewrite the HTML code in our sample as follows:


<select name="idcountry" id="idcountry">
     <optgroup label="English">
         <option value="IND">India</option>
         <option value="GBR">United Kingdom</option>
         <option value="USA">United States</option>
     </optgroup>
     <optgroup label="Spanish">
         <option value="BOL">Bolivia</option>
         <option value="CHL">Chile</option>
         <option value="COL">Colombia</option>
         <option value="ESP">Spain</option>
     </optgroup>
</select>

<option value="IND">India</option>

<option value="GBR">United Kingdom</option>

<option value="USA">United States</option>

</optgroup>

<option value="BOL">Bolivia</option>

<option value="CHL">Chile</option>

<option value="COL">Colombia</option>

<option value="ESP">Spain</option>

</optgroup>

</select>

And we will get the resulting dropdown as:

Using javascript to dynamically group entries in a dropdown

It is also possible to use a javascript function that will run on page load, and will rewrite the content of a dropdown, grouping the entries by some criterion.

The following built-in functions will be used:

document.getElementByID – Get a reference to the “select” element
getElementByTagName – Get an array holding the entries (<option>…</option>) in the “select” element.
createElement(“optgroup”), optgroup.setAttribute(“label”) – Create a new “optgroup” element
appendChild, removeChild – Add and remove subelements from the select element and the optgroup subelements

The sample function below groups entries in the dropdown by the starting character:


<script type="text/javascript">

 function order_dropdown_entries() {
     var select = document.getElementById("idcountry")
     if (!select) {
         // Retry until the DOM is ready
         setTimeout(order_dropdown_entries, 20)
         return;
     }
     // Get the entries in the dropdown as an array
     var options = select.getElementsByTagName("option");

     var optgroups = [];

     while(options.length > 0) {
         var option = options[0];
         var label = option.innerHTML;
         var letter = label[0];
         var optgroup;
         if (letter in optgroups) {
             optgroup = optgroups[letter];
         } else {
             optgroup = document.createElement("optgroup");
             optgroup.setAttribute("label", letter);
             optgroups[letter] = optgroup;
         }
         select.removeChild(option);
         optgroup.appendChild(option);
     }

     for(var letter in optgroups) {
         select.appendChild(optgroups[letter]);
     }
 };

 order_dropdown_entries();

</script>

function order_dropdown_entries() {

var select = document.getElementById("idcountry")

if (!select) {

// Retry until the DOM is ready

setTimeout(order_dropdown_entries, 20)

return;

}

// Get the entries in the dropdown as an array

var options = select.getElementsByTagName("option");

var optgroups = [];

while(options.length > 0) {

var option = options[0];

var label = option.innerHTML;

var letter = label[0];

var optgroup;

if (letter in optgroups) {

optgroup = optgroups[letter];

} else {

optgroup = document.createElement("optgroup");

optgroup.setAttribute("label", letter);

optgroups[letter] = optgroup;

}

select.removeChild(option);

optgroup.appendChild(option);

}

for(var letter in optgroups) {

select.appendChild(optgroups[letter]);

}

};

order_dropdown_entries();

</script>

References

—

OpenAlfa Blog

How to group entries in a HTML form dropdown

Using static HTML to group entries in a dropdown

Using javascript to dynamically group entries in a dropdown

References

Leave a Reply Cancel reply