在将选项附加到选择框后，选中的选项不受尊重

Question

我已经看到很多关于使用jQuery动态地将选项添加到选择框的其他问题，我按照他们的说明操作，但仍然没有选择该选项。这是HTML：

<select id="updated-value-dropdown" class="form-control" style="min-width: 10em;">
</select>

这是Javascript：

$('#edit-modal').on('show.bs.modal', function (e) {
  target_element = $(this).find('#updated-value-dropdown');
  target_element.html(''); // clear options
  var add_options = getOptionsToAdd();
  for (var i = 0; i < add_options.length; i++) {
    target_element.append(new Option(add_options[i], add_options[i], i === 0, i === 0));
  }
}

结果是一个带有正确选项的下拉框，我可以看到当我检查页面时，第一个选项在HTML中被标记为“已选中”，但它仍然没有显示当显示模态时实际选择...为什么这不起作用？

这就是页面上的下拉列表（没有点击它）：

当我点击它时，这就是下拉列表的样子 - 正如你所看到的，第一个选项是“选中”，旁边有一个复选标记，但正如你在上图所示，它实际上并不是显示为实际框中的值（除非我手动单击该值）：

另外，我正在使用bootstrap，我不知道这与它有什么关系......

Answer 1

哦，上帝，我是个白痴 - 代码中有另一个地方正在调用target_element.val(...)并将其设置为一个值，该值不是选项列表中的一个选项，所以这清除了我试图选择的价值。

Answer 2

你可以这样做（在你的最后一行）：

target_element
.append(new Option(add_options[i], add_options[i], i === 0, i === 0))
.promise()
.done(function() {
    target_element.find('option:first').prop('selected',true);
    //if you want to select first option after append really done
});

抱歉，如果我误解了你的需要，我会告诉你。