Как я могу добавить новые опции к элементу выбора, но сохранить новые элементы опции в порядке, как они объявлены

Question

Я хочу изменить все параметры выбранного элемента, когда пользователь нажимает кнопку. Однако новые данные, добавленные в теги select, не следуют их порядку в переменной newOptions. Он помещает все значения с ключами, ведущими с 0 в конец списка, хотя они объявлены и должны быть сверху. Как я могу решить эту проблему?

Ожидается:

<select name="car" id="car">
    <option value="0">00</option>
    <option value="5">05</option>
    <option value="15">15</option>
    <option value="30">30</option>
    <option value="45">45</option>
</select>

Получено

<select name="car" id="car">
    <option value="15">15</option>
    <option value="30">30</option>
    <option value="45">45</option>
     <option value="0">00</option>
    <option value="5">05</option>
</select>

function change() {
  $("#car").empty();

  newOptions = {
    "00": 0,
    "05": 5,
    "15": 15,
    "30": 30,
    "45": 45
  }

  for (const [k, v] of Object.entries(newOptions)) {
    $("#car").append($("<option></option>").attr("value", v).text(k));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="car" id="car">
  <option value="00">Toyota</option>
  <option value="10">BMW</option>
  <option value="20">Honda</option>
</select>

<input type="submit" onclick="change()" value="Change select options">

Answer 1

Применение функции сортировки после Object.entries.

function change() {
  $("#car").empty();

  newOptions = {
    "00": 0,
    "05": 5,
    "15": 15,
    "30": 30,
    "45": 45
  }

  for (const [k, v] of Object.entries(newOptions).sort(function(a, b) {return a - b;})) {
   $("#car").append($("<option></option>").attr("value",v).text(k));
}
}