如何对 <select> 中动态生成的 <option> 进行排序 [重复]

Question

我有 4 个字段是根据前一个字段的输入生成的，例如在树列表中。示例：

<select id="confederation">
    <option value="">Confederation</option>
    <option value="29521">Europe (UEFA)</option>
    <option value="38731">South America (CONMEBOL)</option>
    <option value="40934">Africa (CAF)</option>
    <option value="43099">North &amp; Central America (CONCACAF)</option>
    <option value="44624">Asia (AFC)</option>
    <option value="46617">Oceania (OFC)</option>
</select>
<select id="country">
    <option value="">Country</option>
</select>
<select id="team">
    <option value="">Team</option>
</select>
<select id="competition">
    <option value="">Competition</option>
</select>

如您所见，最初仅填充第一个列表。选择“confederation”后，“country”会相应填充，然后选择“country”后，“team”会填充，依此类推。

我想要实现的是按字母顺序对列表进行排序（它们支持多种语言，因此我无法“硬编码”某个顺序）

所以我有以下脚本来正确排序第一个列表：

$("#confederation").append($("#confederation option:gt(0)").sort(function (a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
        }));

如何修改它以容纳所有列表并正确排序？

谢谢一百万， 方舟

编辑：这是使用 smarty 填充列表的方式：

{section name=foo start=0 loop=$tree_depth}
{assign var="index" value=$smarty.section.foo.index}
<select id="{$id}">
<option value="">[[{$levels_captions.$index}:raw]]</option>
    {*{defining parent of the curent selectbox}*}
    {if $index == 0}
        {assign var='parent' value=0}
    {else}
        {assign var='parentIndex' value=$index-1}
        {assign var='parent' value=$value.$parentIndex}
    {/if}
    {*{generating tree items based on parent}*}
    {foreach from=$tree_values.$parent item=tree_value}
        <option value="{$tree_value.sid|escape}"{if $value.$index == $tree_value.sid} selected="selected"{/if}>[[PhrasesInTemplates!{$tree_value.caption}]]</option>
    {/foreach}
</select>

编辑 2：我不同意这个问题应该被标记为重复。另一个线程中提出的解决方案部分适用于这个问题，但它不能应用于这个问题。或者我遗漏了一些明显的东西，因此问题！

Answer 1

$(function() {

    sortOptions($("#confederation"));

});

function sortOptions(selectElement) {
    var options = selectElement.find('option').get(); //get() returns an array of all option elements
    options.sort(optionsSort);
    /*Load the new array of sorted option elements into the select element, 
get the select element using get(0) so that we can access properties specific to HTMLSelectElement, 
eventually keep the first option selected(Without this, the last option is selected) */
    selectElement.html(options).get(0).selectedIndex = 0; 


}

function optionsSort(o1, o2) {
    if(o1.text == o2.text) return 0;
    return (o1.text > o2.text)? 1 : -1;
}

Fiddle

这样您可以在填充其他选择元素时使用sortOptions(selectElementWrappedInjQuery)。