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

Dynamic option groups for Select element based on alphabet

本文关键字：动态 选项 元素 选择 字母表      更新时间：2023-09-26

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

例如数据

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

尝试

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]);
    });
});
相关文章：