Accesskey n skips to in-page navigation. Skip to the content start.

s_gotoW3cHome Internationalization
 

Sorting select options

Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.).

Updated 2003-06-09 15:10

Question

As part of a form, I have a list of terms in a drop-down box. Why are they not correctly sorted when I translate the items in the list?

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.

Tell us what you think (English).

Subscribe to an RSS feed.

New resources

Home page news

Twitter (Home page news)

‎@webi18n

Further reading

By: Russ Rolfe, Microsoft Corporation.

Valid XHTML 1.0!
Valid CSS!
Encoded in UTF-8!

Content first published 2003-06-09. Last substantive update 2003-06-09 15:10 GMT. This version 2011-02-19 8:04 GMT

For the history of document changes, search for qa-select-sorting in the i18n blog.