使用jQuery基于哈希种子数据填充select元素的最优方法

刚好在项目里经常遇到这种用哈希数据初始化select的需求，下面分享几个经过验证的实用方案，你可以根据自己的场景灵活选择：

1. 带分组的填充方案（适合分类化选项） #

如果你的哈希键代表选项分组（比如示例里的option1、option2作为分组标签），这种方法能让select的结构更清晰，用户体验更好：

// 你的种子数据
var select_options = { "option1": ["item1", "item2"], "option2": ["item3", "item4"] };
// 获取目标select元素
var $targetSelect = $('#mySelect');

// 先清空原有选项，避免重复填充
$targetSelect.empty();

// 遍历哈希的每个分组
$.each(select_options, function(groupLabel, groupItems) {
    // 创建分组容器optgroup
    var $optGroup = $('<optgroup>').attr('label', groupLabel);
    
    // 遍历当前分组下的所有选项
    $.each(groupItems, function(_, itemText) {
        // 创建单个option，这里可以自定义value（比如用item文本、索引或业务ID）
        var $option = $('<option>').val(itemText).text(itemText);
        $optGroup.append($option);
    });
    
    // 将分组添加到select中
    $targetSelect.append($optGroup);
});

这个方案的优点是结构清晰，完全匹配你给出的哈希结构，用户能直观看到选项的分类。

2. 无分组的合并填充方案 #

如果不需要分组，只是想把哈希里所有的子项直接作为select的平级选项，可以用这种更简洁的写法：

var select_options = { "option1": ["item1", "item2"], "option2": ["item3", "item4"] };
var $targetSelect = $('#mySelect');

$targetSelect.empty()
    // 先把所有选项合并成一维数组，再生成option
    .append($.map(select_options, function(items) {
        return $.map(items, function(text) {
            return $('<option>', { value: text, text: text });
        });
    }));

或者更易读的分步写法：

var select_options = { "option1": ["item1", "item2"], "option2": ["item3", "item4"] };
var $targetSelect = $('#mySelect');
$targetSelect.empty();

// 收集所有选项到一个数组
var allOptions = [];
$.each(select_options, function(_, items) {
    allOptions = allOptions.concat(items);
});

// 逐个添加到select
$.each(allOptions, function(_, text) {
    $targetSelect.append($('<option>', { value: text, text: text }));
});

3. 性能优化版（大量选项场景） #

如果你的哈希里包含成百上千个选项，频繁操作DOM会导致页面卡顿，这时候可以用文档片段来减少DOM操作次数：

var select_options = { "option1": ["item1", "item2"], "option2": ["item3", "item4"] };
var $targetSelect = $('#mySelect');
// 创建文档片段，临时存放所有元素
var docFragment = document.createDocumentFragment();

$.each(select_options, function(groupLabel, groupItems) {
    var $optGroup = $('<optgroup>').attr('label', groupLabel);
    $.each(groupItems, function(_, itemText) {
        $optGroup.append($('<option>').val(itemText).text(itemText));
    });
    // 将jQuery对象转换为原生DOM元素，添加到片段中
    docFragment.appendChild($optGroup[0]);
});

// 最后一次性清空并插入所有元素
$targetSelect.empty().append(docFragment);

文档片段不会触发页面重绘，所有元素都在内存中构建完成后再插入DOM，能大幅提升性能。

几个实用的小技巧 #

• 自定义Option的Value：如果不想用选项文本作为value，可以根据业务需求修改，比如用分组名+索引：val(groupLabel + '_' + index)
• 预设选中项：填充完成后，可以用$targetSelect.val('item2')来设置默认选中的选项
• 避免重复填充：每次填充前务必调用empty()，防止多次执行代码导致选项重复

内容的提问来源于stack exchange，提问作者Ahmad Hamdi