如何使用纯Javascript根据值对选择选项进行排序? [英] how to sort select options based on values using pure Javascript?

问题描述

在JSP页面上，我有以下声明:

On a JSP page I have a following declaration:

<html:select property="filterBookingTargetId" styleClass="input_middle" >
    <html:option value="0">-all-</html:option>
    <html:options collection="bookTargetTypes" property="key" labelProperty="value"/> 
</html:select>

其中集合 bookTargetTypes 是一组以Java形式实现为HashMap并由服务器读取的键值对(整数，字符串).

where collection bookTargetTypes is a set of key-value (int, String) pairs implemented in Java as a HashMap and read by a server.

如果我可以使用jQuery，则可以将其实现为类似于Stack讨论中给出的答案

If I could use jQuery, I would implement it similarly to answers present on the Stack discussion here. Unfortunately, I can't; nor can I sort those values before they are uploaded to the server i. e. in Java, on the code level.

潜在的问题是，如何在纯JavaScript中引用 bookTargetTypes 集合，以便在页面上显示它们之前按字母顺序对它们进行排序?

The underlying question is, how in pure JavaScript can I refer to bookTargetTypes collection to sort them alphabetically before they are shown on the page?

" bookTargetTypes "集合的示例值在页面上呈现后，如下所示:

Example values of "bookTargetTypes" collection, after they are rendered on the page, are shown below:

<html:option value="5">bbb</html:option>
<html:option value="13">ccC</html:option>
<html:option value="1">Aaa</html:option>

[更新]

    <script language="javascript">

function sortOptions() {
var options = document.getElementById('myselect').options;
var optionsArray = [];
for (var i = 0; i < options.length; i++) {
    optionsArray.push(options[i]);
}
optionsArray = optionsArray.sort(function (a, b) {           
    return a.innerHTML.toLowerCase().charCodeAt(0) - b.innerHTML.toLowerCase().charCodeAt(0);    
});

for (var i = 0; i <= options.length; i++) {            
    options[i] = optionsArray[i];
}
options[0].selected = true;
}

sortOptions();
</script>

<input type="hidden" name="method" value="listSettlementFiles">
<input type="hidden" name="pageNo" value="">
<input type="hidden" name="countPerPage" value="">
<input type="hidden" name="sc" value="">

<div class="search_bar" id="search" name="search_div">
    <table align="center" width="100%">
        <tr>
            <td align="center">
                <LABEL>Name of channels</LABEL>
                <select name="filterBookingTargetId" id="myselect" class="input_middle">
                <option value="17">Baa</option>
                <option value="15">Paa</option>
                <option value="2">Saaa</option>
                <option value="9">Daaa</option>
                <option value="6">Naaa</option>
                <option value="1">Eaaa</option>
                <option value="14">Sdda</option>
                <option value="7">Raaa</option>
                <option value="22">Pdddaa</option>
                </select>

推荐答案

好吧，因为您说过您不能使用jquery或不能修改Java代码.这是一个纯JavaScript解决方案.如果您提供一个ID供您选择，那会更好.您可以将选项保存在数组中，然后通过比较每个选项中innerHTML的首字母字符来使用 sort 函数.

Well, since you said you can't use jquery or can't modify java code. Here is a pure javascript solution. It would be better if you give an id for your select. You can save the options in an array and then use sort function by comparing first letter charcode of innerHTML inside each option.

给出一个ID

<html:select id="myselect" property="filterBookingTargetId" styleClass="input_middle" >
    <html:option value="0">-all-</html:option>
    <html:options collection="bookTargetTypes" property="key" labelProperty="value"/> 
</html:select>

javascript

function sortOptions() {
    var options = document.getElementById('myselect').options;
    var optionsArray = [];
    for (var i = 0; i < options.length; i++) {
        optionsArray.push(options[i]);
    }
    optionsArray = optionsArray.sort(function (a, b) {           
        return a.innerHTML.toLowerCase().charCodeAt(0) - b.innerHTML.toLowerCase().charCodeAt(0);    
    });

    for (var i = 0; i <= options.length; i++) {            
        options[i] = optionsArray[i];
    }
    options[0].selected = true;
}

sortOptions();

点击此处查看 小提琴演示

click here for Fiddle Demo

这篇关于如何使用纯Javascript根据值对选择选项进行排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！