如何按排序顺序显示<Select>？

Question

如何使用JavaScript对<select>标签中的<option>元素进行排序？

以下是我的HTML代码：

<form action="example.asp">
<div>
<select size="3">
<option value="op2" >Option 2</option>
<option value="op1">Option 1</option>
<option value="op4">Option 4</option>
<option value="op3">Option 3</option>

</select>
</div>
</form> 

- Tree

Answer 1

如果值与文本不同，请使用以下函数对它们进行排序。这只是上面解决方案的更新版本，将保留名称和相关值。

<script language="JavaScript" type="text/javascript">
function sortList() 
{ 
    var lb = document.getElementById('mylist'); 
    arrTexts = new Array(); 
    arrValues = new Array(); 
    arrOldTexts = new Array(); 

    for(i=0; i<lb.length; i++) 
    { 
        arrTexts[i] = lb.options[i].text; 
        arrValues[i] = lb.options[i].value; 
        arrOldTexts[i] = lb.options[i].text; 
    } 

    arrTexts.sort(); 

    for(i=0; i<lb.length; i++) 
    { 
        lb.options[i].text = arrTexts[i]; 
        for(j=0; j<lb.length; j++) 
        { 
            if (arrTexts[i] == arrOldTexts[j]) 
            { 
                lb.options[i].value = arrValues[j]; 
                j = lb.length; 
            } 
        } 
    } 
}
</script>

- Yasir Al-Agl

---

更喜欢@jeffpar下面的解决方案，因为它不需要在最后使用额外循环的辅助数组。此外，该解决方案更短。 - Nick

Answer 2

<script language="JavaScript" type="text/javascript">
function sortlist() {
var lb = document.getElementById('mylist');
arrTexts = new Array();

for(i=0; i<lb.length; i++)  {
  arrTexts[i] = lb.options[i].text;
}

arrTexts.sort();

for(i=0; i<lb.length; i++)  {
  lb.options[i].text = arrTexts[i];
  lb.options[i].value = arrTexts[i];
}
}
</script>


<form action="#">
<select name=mylist id=mylist size=5>
<option value="Anton">Anton
<option value="Mike">Mike
<option value="Peter">Peter
<option value="Bill">Bill
<option value="Carl">Carl
</select>
<br>
<a href="javascript:sortlist()">sort</a>
</form>

- Pranay Rana

---

我不需要点击和排序。它应该在加载时进行排序。 - Tree

在页面加载事件中调用此函数。 - Pranay Rana

@Tree 然后只需从 <script> 元素中调用 sortlist()。 - Göran Lilja

如果名称和值不同（如OP的问题中），那么这样做是行不通的。参考Yasir的答案，可以处理不同的值。 - CpnCrunch

Answer 3

在创建html之前，您应该考虑这个问题。如果您是通过某种列表或动态页面机制生成它们的，则在生成选项元素之前对它们进行排序 - 这是最清晰的方式 :)

- Łukasz W.

---

然而，并不总是最好的方法。有时您只需要对HTML列表进行排序。例如，我刚刚收到一个客户提供的项目清单，要求将其放入HTML列表中。为了方便维护，我更愿意按照客户给我的顺序保持它们（），但在向用户显示时对它们进行排序。 - CpnCrunch

Answer 4

基于Yasir Al-Agl的答案，有一个更简单的解决方案：

function sortList() 
{ 
    var lb = document.getElementById('mylist'); 
    arr = new Array(); 

    for(i = 0; i < lb.length; i++) { 
        arr[i] = lb.options[i]; 
    } 

    arr.sort(function(a,b) {
        return (a.text > b.text)? 1 : ((a.text < b.text)? -1 : 0);
    });  // or use localeCompare() if you prefer

    for(i = 0; i < lb.length; i++) { 
        lb.options[i] = arr[i];
    }
}

简而言之，您只需要一个数组，其中的元素仅是对原始“选项”对象的引用。 sort()函数还可以自由选择要排序的选项属性（即文本属性、值属性等）。

但是，请不要忘记，在排序后，“select”控件的“selectedIndex”属性可能不再正确。

- jeffpar

Answer 5

这个函数与上一个答案中的一样，但是还保留了项目的选择。

// Sorts all entries of a select item (= dropdown) by their visible name, keeping the internal values and the selection
function sortSelectEntries(selItem) {
    let formerSel = selItem.value;
    let count = selItem.length;
    let options = new Array();
    for (var i = 0; i < count; i++)
        options[i] = selItem.options[i];
    options.sort((e1, e2) => e1.text > e2.text ? 1 : (e1.text < e2.text ? -1 : 0));
    for (i = 0; i < count; i++)
        selItem.options[i] = options[i];
    selItem.value = formerSel; // restore selection
}

- Nick