基于字母的Select元素的动态选项组

Question

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

例如数据

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

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