Sorting select options

Question

Answer

Although many programming languages have devices like drop-down boxes that have the capability of sorting a list of items before displaying them as part of their functionality, the HTML <select> function has no such capabilities. It lists the <option> elements in the order received. Thus one must pre-sort their translated options before presenting them to the client. This is either done manually or by using some developer-designed process (like using an XSLT transform).

For example, let's say we have a pull-down list for types of pets. In the list, we have the following in alphabetical order:

<form .....>
    <select size="1" name="pet">
       <option value='cat'>cat</option>
       <option value='dog'>dog</option>
       <option value='mouse'>mouse</option>
    </select>
...
...
</form>

When this is translated to Dutch, the list becomes:

<form .....>
    <select size="1" name="pet">
       <option value='cat'>kat</option>
       <option value='dog'>hond</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

But for it to be in correct Dutch alphabetical order, we will need to re-arrange the list to:

<form .....>
    <select size="1" name="pet">
       <option value='dog'>hond</option>
       <option value='cat'>kat</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

This must be done for each language to be displayed.

By the way

Note that the value parameters are not translated in the examples above. This separation of material to be displayed to the user and data to be processed at the back-end allows the developer to keep the back-end processing the same. Meaning they do not have to change what they expect to receive from the user every time support for a new language is added.