Question

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

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

其中collection bookTargetTypes 是一组键值（int，String）对，在Java中实现为HashMap并由服务器读取。

如果我可以使用jQuery，我会按照堆栈讨论here中的答案类似地实现它。不幸的是，我做不到;我也无法在将这些值上传到服务器之前对其进行排序。即在Java中，在代码级别上。

基本问题是，在纯JavaScript中我如何引用 bookTargetTypes 集合，在页面上显示之前按字母顺序对它们进行排序？

“bookTargetTypes”集合在页面上呈现后的示例值如下所示：

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

[UPDATE]

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

Answer 1

好吧，既然你说你不能使用jquery或者不能修改java代码。这是一个纯粹的JavaScript解决方案。如果你为你的选择提供一个id会更好。您可以将选项保存在数组中，然后通过比较每个选项中innerHTML的第一个字母charcode来使用排序函数。

HTML中的

给出了一个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();

点击此处查看 Fiddle Demo

如何使用纯Javascript基于值对选择选项进行排序？

1 个答案: