放在选项列表的顶部

Question

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

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>

Answer 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>

放在选项列表的顶部

Prepend to top of Option list

javascript

select

option