Question

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

以下是我的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>

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>

Answer 2

您应该在pre-html创建级别上考虑它。如果您是从某种列表或动态页面机制生成它们，那么在生成选项元素之前对它们进行排序 - 这是最清晰的方式;）

Answer 3

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

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

简而言之，您只需要一个Array，其元素只是对原始“options”对象的引用。 sort（）函数还可以自由选择要排序的选项属性（即text属性，value属性等）。

但请注意，排序后“select”控件的“selectedIndex”属性可能不再正确。

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
}

如何按排序顺序显示<select> </select>

5 个答案: