如何生成名称的选择下拉列表，并在 javascript 或 jquery 中使用 optgroup 将它们分组？

如何解决如何生成名称的选择下拉列表，并在 javascript 或 jquery 中使用 optgroup 将它们分组？

主要数据是一个对象中大约 5000 个键值对。
结构如下：

var data = {
    '1:2':'Bolivia','1:1':'Austria',...
     ...
     ...
    '100:100':'Zair','80:40':'Greece','20:60':'France'
};

第一步应该是按对象的值对对象进行排序。我使用以下代码完成了此操作：

data = Object.fromEntries(Object.entries(data).sort((a,b)=>a[1]>b[1]?1:((b[1]>a[1])?-1:0)));

第 2 步是使用以下代码为 optgroups 创建标签：

var fl = [...new Set(Object.values(data).map(name=>name.charat(0)))];

第 3 步是通过使用以下代码为下拉菜单创建“无选择”选项来开始生成列表：

var options = '<option value="0:0">----</option>';

第 4 步是使用以下代码生成 optgroups：

$.each(fl,function(k,L)
{
    options += '<optgroup label="'+L+'"></optgroup>';
});

带有 select 元素的 HTML 代码：

<select id="names"></select>

然后我在 select 元素中附加了 optgroups：

$('#names').html(options);

最后一步是在每个 optgroup 中生成列表：

$.each(islandnames,function(c,n)
{
    $('#names optgroup[label="'+n.charat(0)+'"]').append('<option value="'+c+'">'+n);
});

一个块中所有使用的代码：

<html><body>
<select id="names"></select>
<script>
var data = {
    '1:2':'Bolivia','20:60':'France'
};
data = Object.fromEntries(Object.entries(data).sort((a,b)=>a[1]>b[1]?1:((b[1]>a[1])?-1:0)));
var fl = [...new Set(Object.values(data).map(name=>name.charat(0)))];
var options = '<option value="0:0">----</option>';
$.each(fl,L)
{
    options += '<optgroup label="'+L+'"></optgroup>';
});
$('#names').html(options);
$.each(data,n)
{
    $('#names optgroup[label="'+n.charat(0)+'"]').append('<option value="'+c+'">'+n);
});
</script>
</body></html>

代码看起来可行，但我认为存在一些性能问题。
生成下拉列表大约需要两秒钟，我想问一下是否有更短或更快的方法来获得相同的结果？
预先感谢您的回答。

完整代码在这里：Jsfiddle

如何生成名称的选择下拉列表，并在 javascript 或 jquery 中使用 optgroup 将它们分组？

如何解决如何生成名称的选择下拉列表，并在 javascript 或 jquery 中使用 optgroup 将它们分组？

相关推荐