javascript - 当您通过 jQuery 附加新选项时，为什么 jQuery sort() 会选择错误的选项

Question

我正在寻找有关为什么会发生此问题的说明，以及应采取哪些措施来避免这种行为。

我有一个select将在事件触发器上添加新选项。当此触发器触发时，我想创建一个新的option追加，select然后将所有选项按顺序排序（按字母顺序或其他方式，与此问题无关）。当我使用下面的代码执行此操作时， 将option添加到select但是新选项被选中，即使不同option的是 "selected" option。

演示

$(function() {
  var select = $('select');
  select.append("<option value='9'>Nine</option>"); // This will become selected
  select.html(select.find('option').sort(function(x, y) {
    return $(x).text() > $(y).text() ? 1 : -1;
  }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <select>
    <option>Choose a number</option>
    <option value="3">Three</option>
    <option value="1">One</option>
    <option value="0">Zero</option>
    <option value="2" >Two</option>
    <option value="8" selected="true">Eight</option>
  </select>
</div>

编辑：这里的问题不是选项将以一种或另一种方式组织。问题是在对选项进行排序后，选择将错误的选项显示为选定的选项。在 JS 运行之后，我希望 8 仍然是选定的选项。

标签： javascriptjquery