Javascript 如何按排序顺序显示 <Select >
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3467514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show <Select > in sorted order
提问by Tree
How can I sort the <option>elements of a <select>tag using JavaScript?
如何使用 JavaScript<option>对<select>标签元素进行排序？
Here is the HTML I have:
这是我拥有的 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>
采纳答案by Pranay Rana
<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>
回答by Yasir Al-Agl
If the value is different than the text, use the following function to sort both of them. This is just an updated version of above solution and will keep both the name and associated value.
如果值与文本不同，请使用以下函数对它们进行排序。这只是上述解决方案的更新版本，将保留名称和关联值。
<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>
回答by ?ukaszW.pl
You should think about it on the pre html-creation level. If you are generating them from some kind of list or by dynamic page mechanism then sort them before you generate your option elements - thats the clearest way ;)
您应该在创建 html 之前的级别考虑它。如果您是从某种列表或通过动态页面机制生成它们，则在生成选项元素之前对它们进行排序 - 这是最清晰的方法；)
回答by jeffpar
A simpler solution, building on Yasir Al-Agl's answer:
一个更简单的解决方案，基于 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];
}
}
In short, you need only one Array, the elements of which are simply references to the original "options" Objects. The sort() function also has the freedom to choose which option property to sort on (ie, the text property, the value property, etc).
简而言之，您只需要一个数组，其中的元素只是对原始“选项”对象的引用。sort() 函数还可以自由选择要排序的选项属性（即文本属性、值属性等）。
Don't forget, however, that the "selectedIndex" property of the "select" control may no longer be correct after the sort.
但是不要忘记，“select”控件的“selectedIndex”属性在排序后可能不再正确。
回答by Nick
This function works as in the last answer, but also keeps the selection of item
此功能与上一个答案一样工作，但也保留了项目的选择
// 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
}
