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;
        }));

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

万分感谢 Arky

编辑：这是使用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)。

如何在<select> </select> </option>中动态生成<option>

1 个答案: