Javascript 如何对中动态生成的进行排序

我有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>

如何修改它以适应所有列表并正确排序

万分感谢， 阿基

编辑：以下是使用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：我不同意将此问题标记为重复问题。在另一个线程中提出的解决方案部分适用于这个问题，但无法实现到这个问题。或者我遗漏了一些明显的东西，这就是问题所在

$(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;
}

---

通过这种方式，您可以在填充其他select元素时使用sortOptionsselectElementWrappedInjQuery。

只需在添加元素时将您已有的排序功能应用于元素？其他选项数据存储方式/位置？@billyonecan-至少与我尝试的方式不同。此外，该列表是使用smarty生成的，我将用有关它的更多信息更新它。@RachelGallen-2我POV中的不同问题，但我使用的是相同的示例。由于某些原因，我无法使其正常工作。请你解释清楚好吗？@Arkymedes我在代码中添加了更多详细的注释。顺便说一句，排序需要传入jQuery对象，而不是原始DOM对象。例如，要对您将使用的国家进行排序：sortOptions$'country'您好，我衷心感谢您为此投入的时间，但由于某些原因，它不起作用。我对编程的所有事情都不在行，但我对编程有很好的理解。我就是不能把这些放在一起。现在发生的事情是，第一个列表得到排序，我必须跳过我不想排序的第一个元素，因为它是标题，但是当我从联邦列表中选择任何内容时，第二个列表国家在填充时不会得到排序。我不确定在第二个列表填充时如何触发脚本。再次，非常感谢：我想Sortopions确实为联邦工作。它应该也适用于其他选择。填充完国家后，立即使用sortOptions$countries；这同样适用于团队和竞争

$(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;
}