将选项附加到 select 框后，selected 不被接受

Question

我已经看到很多关于使用 jQuery 将选项动态附加到 select 框的其他问题，我按照他们的说明进行操作，但仍然不是 select荷兰国际集团的选项。这是 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 中标记为 "selected"，这是应该的，但在显示模式时它仍然没有显示为实际 selected...为什么这不起作用？

下拉菜单在页面上的样子（没有点击它）：

这是我点击下拉菜单时的样子 -- 如您所见，第一个选项是 "selected"，旁边有一个复选标记，但正如您在上图中所见，它实际上并未显示为实际框中的值（除非我手动单击该值）：

还有，我用的是bootstrap，不知道跟这个有没有关系...

Answer 1

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

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

抱歉，如果我误解了您的需求，但我会告诉您方法。

Answer 2

哦，天哪，我是个白痴——代码中还有另一个地方正在调用 target_element.val(...) 并将其设置为一个值，该值不是选项列表中的选项之一，因此正在清除我尝试 select.

的值

将选项附加到 select 框后，selected 不被接受

after appending options to select box, selected is not honored

jquery

select

append

option

selected