Javascript 使用Vanilla JS对选择选项列表重新排序

嗨，我有一个选项下拉列表，上面有按字母顺序排列的水果列表，还有一些没有存货。我试图实现的是将下拉列表中的缺货选项移到列表底部，以便在缺货项目上方显示库存项目

我的想法是找到任何缺货的期权，然后添加一个名为outOfStock的类，并将其移动到列表的底部。为了尝试这样做，我使用innerHTML为每个产品创建了一个数据值&搜索缺货的值，但这似乎只有在查询中有完整的数据值时才起作用。有没有办法找到所有缺货的数据值？或者有没有一个不同的解决方案，您会建议我可以实现将缺货项目移到期权列表的底部？任何帮助都将不胜感激

对于document.querySelectorAll.form下拉选项的const元素{ element.dataset.product=element.innerHTML； } document.querySelector.form-dropdown选项[data product='Cherry-缺货'].classList.add'outOfStock'； 选择选项 苹果 香蕉 樱桃-脱销 几维鸟 柠檬-缺货 甜瓜脱销 西瓜

---

最好的方法是在将项目添加为HTML之前对其进行排序，但这里我已经将它们从HTML中删除，然后进行排序，然后重新应用tp HTML

对于document.querySelectorAll.form下拉选项的const元素{ element.dataset.product=element.innerHTML； } document.querySelector.form-dropdown选项[data product='Cherry-缺货'].classList.add'outOfStock'； const select=document.querySelector'select'； const options=document.queryselectoral'option'； 常数排序=[]； options.forEachoption=>sortOptions.pushoption； sortOptions.sorta，b=>a.innerHTML.indexOf'-Out'>1-1 : 1; select.innerHTML=； sortOptions.forEachoption=>select.appendChildoption； 选择选项 苹果 香蕉 樱桃-脱销 几维鸟 柠檬-缺货 甜瓜脱销 西瓜

---

我看了一大堆重复的答案，但不太喜欢，所以我自己写

最简单的方法是删除有问题的选项，然后再次附加它们。这将按顺序将它们移动到末尾

下面是示例代码：

document.querySelectorAll'.form下拉列表'.forEachfunctionselect{ Array.fromselect.options.forEachfunctionoption{ 如果option.innerText.Include缺货{ select.removeChildoption； 选择.appendChildoption； option.setAttributedisabled，true； } }; }; 选择选项 苹果 香蕉 樱桃-脱销 几维鸟 柠檬-缺货 甜瓜脱销 西瓜

---

这里的其他答案显示了如何对现有元素进行排序。因此，当您征求建议时，我实际上建议不要硬编码选择选项，而是创建一个对象数组并动态生成选择。像这样：

选择选项 让产品=[ {name:Apple，inStock:true}， {name:Banana，inStock:true}， {name:Cherry，inStock:false}， {name:Kiwi，inStock:true}， {name:Lemon，inStock:false}， {名称：甜瓜，inStock:false}， {name:西瓜，inStock:true} ] products.sorta，b=>{ 伊法·因斯托克{ 返回-1 } } var menu=document.getElementsByClassNameform下拉列表[0] products.forEachitem=>{ var opt=document.createElementoption opt.value=item.name ifitem.inStock opt.text=item.name else opt.text=item.name+-缺货 menu.addopt }

---

像这样@是的，这正是我要找的。谢谢你！！您的代码不会将缺货的产品移到最后。