如何将select下拉框缺货选项放置到「Choose Option」固定选项下方

调整思路 #

你现有代码的问题是直接用prepend把缺货选项插到了整个下拉列表的最顶部，把原本固定第一位的「Choose option」挤到了后面。只需要修改插入逻辑，把缺货选项插到第一个固定选项的后面即可。

修改后的完整代码 #

document.querySelectorAll('.form-dropdown').forEach(function(select) {
  // 取到固定在最顶部的「Choose option」选项
  const fixedTopOption = select.options[0];
  Array.from(select.options).forEach(function(option) {
    if (option.innerText.includes("Out of stock")) {
      option.setAttribute("disabled", true);
      // 将缺货选项插入到固定顶部选项的下一个位置
      select.insertBefore(option, fixedTopOption.nextSibling);
    }
  });
});

逻辑说明 #

• 提前拿到每个下拉框的第一个固定选项，不需要做任何移动
• 用DOM原生的insertBefore方法，把匹配到的缺货选项插到固定选项的下一个相邻节点之前，自然就排在固定选项之后、其他正常选项之前
• 遍历顺序和原列表顺序一致，缺货选项之间的相对顺序会和原列表保持一致

调整后你的下拉列表最终顺序为：

• 固定顶部：Choose option
• 按原顺序排列的缺货选项：Cherry - Out of stock、Lemon - Out of stock、Melon - Out of stock
• 按原顺序排列的可售选项：Apple、Banana、Kiwi、Watermelon

内容的提问来源于stack exchange，提问作者leek1234