仅使用javascript更改选择选项的顺序

Question

我点击按钮时试图颠倒字体选择选项的顺序.我在网上看到的一切都是使用jquery,有什么方法可以用js做到吗？

<button class="gray" type="button" onclick="sortFont();" > click </button>
<select id="fontMenu" >
   <option value="Arial">Arial</option>
   <option value="Times New Roman">Times New Roman</option>
</select>

Answer 1

在这里,我只是获取选项,放在一个数组中.相反.然后将它们添加回来.

document.querySelector("button").onclick = () => {
  const fontMenu = document.querySelector("#fontMenu");
  const options = Array.from(fontMenu.querySelectorAll("option"));
  options.reverse();
  options.forEach((o) => fontMenu.appendChild(o));
}

<button class="gray" type="button" > click </button>
<select id="fontMenu" >
   <option value="Arial">Arial</option>
   <option value="Times New Roman">Times New Roman</option>
</select>