附加到选项列表的顶部答案

【问题标题】：Prepend to top of Option list附加到选项列表的顶部
【发布时间】：2021-09-05 03:43:11
【问题描述】：

您好，我有一个选择选项列表，我想将缺货的选项添加到列表顶部。我有这个工作，但不完全是我想要的。我希望它位于“选择选项”下，因为它应该始终位于顶部，我该怎么做？

document.querySelectorAll('.form-dropdown').forEach(function(select) {
  Array.from(select.options).forEach(function(option) {
    if (option.innerText.includes("Out of stock")) {
      select.removeChild(option);
      select.prepend(option);
      option.setAttribute("disabled", true);
    }
  });
});

<select class="form-dropdown">
  <option disabled="" value="">Choose option</option>
  <option value="0">Apple</option>
  <option value="1">Banana</option>
  <option value="2">Cherry - Out of stock</option>
  <option value="3">Kiwi</option>
  <option value="4">Lemon - Out of stock</option>
  <option value="5">Melon - Out of stock</option>
  <option value="6">Watermelon</option>
</select>

【问题讨论】：

标签： javascript select option

【解决方案1】：

您可以省略select.removeChild(option);，因为在使用.prepend() 时，元素无论如何都会被移动，或者就像我的解决方案.insertBefore() 一样。 element.insertBefore(newNode,existingNode) 将 newNode 放在指定的 existingNode 之前。

document.querySelectorAll('.form-dropdown').forEach(function(select) {
  Array.from(select.options).forEach(function(option) {
    if (option.innerText.includes("Out of stock")) {
      select.insertBefore(option,select.options[1]);
      option.setAttribute("disabled", true);
    }
  });
});

<select class="form-dropdown">
  <option disabled="" value="">Choose option</option>
  <option value="0">Apple</option>
  <option value="1">Banana</option>
  <option value="2">Cherry - Out of stock</option>
  <option value="3">Kiwi</option>
  <option value="4">Lemon - Out of stock</option>
  <option value="5">Melon - Out of stock</option>
  <option value="6">Watermelon</option>
</select>

【讨论】：