[i18n-drafts] How to sort select options? (#779)

xfq has just created a new issue for https://github.com/w3c/i18n-drafts:

== How to sort select options? ==
https://www.w3.org/International/questions/qa-select-sorting.en.html

I've received some feedback from authors who hope this article will be more practical, explaining how to sort select options, such as whether it should be sorted on the client or server, and whether there are any relevant APIs. And if it is processed on the client side, are the sorting results the same across different browsers? I've written a preliminary draft and will consider organizing it later and submitting a pull request:

-----

This can be handled either on the front-end or back-end. The choice depends on your needs and application scenario.

### 1. Client-Side Processing

Using JavaScript on the browser side, you can dynamically sort options without refreshing the page:

1. Use JavaScript to retrieve the `<select>` element on the page.
2. Get all of its `<option>` element nodes.
3. Convert this array-like collection to a true JavaScript array, as arrays have a `.sort()` method.
4. Use the `.sort()` method on arrays and provide a compare function (like `localeCompare()`) to sort the `<option>` elements based on their contents.
5. Reinsert the sorted `<option>` elements back into the `<select>` element (using `appendChild`).

Advantages:

* All sorting calculations are performed in the user's browser.
* Easily implement multiple sorting methods (such as ascending and descending), allowing users to switch dynamically.

Disadvantages:

* If the user has disabled JavaScript, sorting will not work.
* If the list is very large, client-side sorting may cause a slight delay on initial load.

#### Code Example

TBD

### 2. Server-Side Processing

This method directly outputs the `<option>` elements in the desired order when the server generates the HTML page:

1. Retrieve the list data from a database or other data source on the server.
2. Sort the data in the back-end code (for example, using the SQL `ORDER BY` clause or a built-in sorting function in the programming language).
3. Generate the `<option>` tags.
4. The HTML source code received by the browser is already sorted.

Advantages:

* Does not rely on client-side JavaScript, ensuring consistent performance across all browsers and devices.
* The browser renders the sorted list directly, eliminating the need for additional computation.

Disadvantages:

* Once the page has loaded, reordering using different criteria requires a new request to the server.
* While the overhead is minimal for a single request, the sorting computation can consume server resources in highly concurrent scenarios.

#### **Code Example**

TBD

Please view or discuss this issue at https://github.com/w3c/i18n-drafts/issues/779 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 14 October 2025 00:48:49 UTC