Сортировка опций в нескольких дисплеях SELECT разрывается с новыми браузерами

Question

На некоторых веб-сайтах я использую код для сортировки <OPTION> значений в полях <SELECT>.

Однако сортировка и отображение работали нормально с некоторыми недавними обновлениями браузера (в Opera и Chrome ), теперь они больше не отображаются правильно и отображают некоторые странные проблемы с функциональностью в браузере.

Я создал jsBin , чтобы привести пример.

На jsBin, в консоли видно, что все элементы отсортированы правильно, однако в элементе <SELECT> отображение некорректно.

Ниже приведен код, который я использовал бы для сортировки полей <SELECT><OPTION>:

//HTML
<a href="#" onClick="sortNames(); return false">Sort Names</a><br />
<br />
<select id="sortable_select" multiple>
  <option>John Doe</option>
  <option>Jane Doe</option>
  <option>Mikey Mike</option>
  <option>First Last</option>
</select>

<script>
  //JQuery
  function sortNames() {
    var sortedList = $('#sortable_select option').sort(sortList);
    $('#sortable_select').html(sortedList);
  }
  function sortList(a,b) {
    var a = a.text;
    var b = b.text;
    return a === b ? 0 : a < b ? -1 : 1;
  }
</script>

Опять же, посмотрите jsBin , чтобы увидеть живой пример.

Если вы используете CHROME preversion 81, это, вероятно, будет работать для вас. То же самое с Opera до версии 68.

Это нормально работает в Microsoft Edge 44.18362.449.0 и используется для нормальной работы в предыдущих версиях Chrome и Opera.