按顺序填充下拉列表

Populate the dropdown in order

本文关键字:下拉列表 填充 顺序      更新时间:2023-09-26

我试图填充我的下拉在一定的顺序(字母顺序/alpha数字顺序),但我的代码似乎不工作。它正在填充值,但不是按顺序填充。

我的代码

function dropdown(){
    var html = html + "<option value='All'>All</option>";
    var colValue = getColumn("COLUMN");
    for( var i = 0; i < colValue.length; i++ ) {
        var valueRow = colValue[i];
        html = html + "<option value='" + valueRow.c + "'>" + valueRow.c + "-" + valueRow.v + "</option>";
    }
    $('#id').append(html);    
}

在这里,COLUMN是保存值A1,A2,A3,B1的键

下面的代码按照A3,A1,A2,B1的顺序填充下拉列表

我希望下拉列表的填充顺序为A1 A2 A3 B1

当我做alert(html);时,我得到了结果

<option value='All'>All   </option>";
<option value='A3'>A3-a3Value </option>";
<option value='A2'>A1-a2Value </option>";
<option value='A1'>A2-a1Value </option>";
<option value='B1'>B1-b1Value </option>";

,它完全按照相同的顺序填充。

我的问题是,我需要做什么,来填充我的下拉列表?我仍然在java脚本和Jquery的初级阶段。谢谢你的帮助

谢谢

根据你所说的,colValue看起来像这样:

colValue = [
  { c="A3", v="a3Value" },
  { c="A1", v="a2Value" } // etc.
]

所以你需要决定排序的属性,然后你可以创建一个比较器:

function createComparator(property) {
    return function(a, b) {
        return a[property] > b[property];
    };
}

你可以这样使用:

colValue.sort(createComparator("c"));

基于这个SO的答案:如何排序javascript对象基于他们的属性,指定属性

你可以试试:

function dropdown(){
    var html = html + "<option value='All'>All</option>";
    var colValue = getColumn("COLUMN");
    colValue.sort();
    for( var i = 0; i < colValue.length; i++ ) {
        var valueRow = colValue[i];
        html = html + "<option value='" + valueRow.c + "'>" + valueRow.c + "-" + valueRow.v + "</option>";
    }
    $('#id').append(html);    
}

由于valueRow是一个对象而不是一个数组,并且您想对valueRow.v进行排序,您需要的不仅仅是Array.sort()

看看lodash的sortBy: http://lodash.com/docs#sortBy

_.sortBy(valueRow, 'c')