
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:
1 2 3 4 5 6 7 8 9 10 |
<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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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> |
References
- W3Schools: HTML <optgroup> Tag
- Adding optgroups to select using javascript dynamically
- Webdeveloper.com: Howto populate <select> with OPTGROUPs
—