0

我正在从一组数据动态生成一个选择列表，并且我想添加基于字母表的选项组。

例如数据

data = [
  ['bcde','21254'], ['abcd','1234'], ['abcde','23456'], ['bcdef','3232']
];

data.sort();处理基于字母的排序，然后我浏览数据并在每个数据上执行以下操作：

<option value="item[1]">item[0]</option>

但是我想要做的是，在根据字母对项目进行排序后，检查每个项目的第一个字符并基于该字符创建选项组，当下一个项目的字符不同时，创建一个标有新字符的新选项组

所以输出应该是这样的：

<select>
    <optgroup label="A">
        <option value="1234">abcd</option>
        <option value="23456">abcde</option>
    </optgroup>
    <optgroup label="B">
        <option value="21254">bcde</option>
        <option value="3232">bcdef</option>
    </optgroup>
</select>

谁能建议最好的方法是什么，顺便说一句，我正在使用jquery，干杯。

编辑，这是我当前的代码：

$.when( $.indexedDB("dbname").objectStore('employee').each(function(item){
  employeenames.push([item.value.name,item.value.id]);
}).then(function(){
  employeenames.sort();
  $.each(employeenames, function(index, item){
   employeenames[index] = '<option value="'+item[1]+'">'+item[0]+'</option>';
  });           
 })
).done(function() {
  $("#employeenameBox select").html(employeenames);
});
4

1 回答 1

1

尝试

data.sort();

var chars = {};
$.each(data, function (_, item) {
    var char = item[0].charAt(0).toUpperCase();
    if (!chars[char]) {
        chars[char] = $('<optgroup />', {
            label: char
        }).appendTo('select');
    }

    $('<option />', {
        text: item[0],
        value: item[0]
    }).appendTo(chars[char]);
});

演示：小提琴

更新：

$.when($.indexedDB("dbname").objectStore('employee').each(function (item) {
    employeenames.push([item.value.name, item.value.id]);
}).then(function () {
    employeenames.sort();

    var chars = {};
    $.each(employeenames, function (_, item) {
        var char = item[0].charAt(0).toUpperCase();
        if (!chars[char]) {
            chars[char] = $('<optgroup />', {
                label: char
            }).appendTo('#employeenameBox select');
        }

        $('<option />', {
            text: item[0],
            value: item[0]
        }).appendTo(chars[char]);
    });
});
于 2013-11-07T00:43:43.787 回答