Question

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

e.g。数据

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

演示：Fiddle

更新

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

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

1 个答案: