这稍微更快更干净。

var选择值={“1”：“测试1”，“2”：“测试2”};var$mySelect=$（'#mySelect'）；//$.each（选择值、功能（键、值）{var$option=$（“<option/>”{value：键，文本：值});$mySelect.append（$option）；});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><select id=“mySelect”></select>

大多数其他答案使用each函数对selectValues进行迭代。这需要为每个元素调用append，并在单独添加每个元素时触发回流。

将此答案更新为更惯用的函数方法（使用现代JS）可以形成为只调用append一次，使用map和option元素构造函数创建一个option元素数组。

使用OptionDOM元素应该可以减少函数调用开销，因为在创建后不需要更新Option元素，也不需要运行jQuery的解析逻辑。

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

如果您创建一个将新建选项对象的工厂实用程序函数，则可以进一步简化此过程：

const newoption = (...args) => new Option(...args)

然后，这可以直接提供给地图：

$('mySelect').append($.map(selectValues, newoption))

以前的公式

因为append还允许将值作为可变数量的参数传递，所以我们可以预先创建选项元素映射列表，并使用apply将它们作为参数附加到单个调用中。

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

在jQuery的后续版本中，append也接受数组参数，这可以稍微简化：

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

如果您不必支持旧的IE版本，那么使用Option构造函数显然是一种可读且高效的解决方案：

$(new Option('myText', 'val')).appendTo('#mySelect');

它的功能等同于，但比：

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

这看起来更好，提供了可读性，但比其他方法慢。

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

如果您想要速度，最快（经过测试）的方法是使用数组，而不是字符串串联，并且只使用一个追加调用。

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

我做了类似的事情，通过Ajax加载一个下拉项。上面的响应也是可以接受的，但是为了更好的性能，尽可能少地修改DOM总是很好的。

因此，与其在循环中添加每个项目，不如在循环中收集项目，并在完成后将其追加。

$(data).each(function(){
    ... Collect items
})

附加它，

$('#select_id').append(items); 

甚至更好

$('#select_id').html(items);

使用$.map（）函数，可以以更优雅的方式执行此操作：

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));