使用 Vanilla JS 重新排序 select 選項列表

Question

嗨，我有一個選項下拉列表，其中包含按字母順序排列的水果列表，其中一些缺貨。 我想要實現的是將下拉列表中的缺貨選項移動到列表底部，以便庫存商品顯示在缺貨商品的上方。

我的想法是找到任何缺貨的選項，然后添加一個名為 outOfStock 的 class 並將其移至列表底部。 為了嘗試這樣做，我使用其 innerHTML 為每個產品創建了一個數據值並搜索值“缺貨”，但這似乎只有在我在查詢中有完整數據值時才有效。 有沒有辦法可以找到所有“缺貨”的數據值？ 或者有沒有其他的解決方案，你會建議我可以實現將缺貨項目移動到選項列表的底部？ 任何幫助，將不勝感激

 for (const element of document.querySelectorAll(".form-dropdown option")) { element.dataset.product = element.innerHTML; } document.querySelector(".form-dropdown option[data-product='Cherry - Out of stock']").classList.add('outOfStock');

 <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

我已經瀏覽了一堆這樣的重復，但不太喜歡答案，所以我正在寫我自己的。

最簡單的方法是刪除有問題的選項，然后 append 再次它們。 這將按順序將它們移動到最后。

這是示例代碼：

 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.appendChild(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 2

最好的方法是在將它們添加為 HTML 之前對項目進行排序，但在這里我已將它們從 HTML 中刪除，然后排序並重新應用 tp Z4C4AD5FCA2E7A3F74DBB1CED00381AA4。

 for (const element of document.querySelectorAll(".form-dropdown option")) { element.dataset.product = element.innerHTML; } document.querySelector(".form-dropdown option[data-product='Cherry - Out of stock']").classList.add('outOfStock'); const select = document.querySelector('select'); const options = document.querySelectorAll('option'); const sortOptions = []; options.forEach(option => sortOptions.push(option)); sortOptions.sort((a,b) => a.innerHTML.indexOf('- Out') > -1? -1: 1); select.innerHTML = ''; sortOptions.forEach(option => select.appendChild(option));

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

此處的其他答案顯示了如何對現有元素進行排序。 因此，當您詢問建議時，我實際上建議不要硬編碼 select 選項，而是創建一個對象數組並動態生成選擇。 像這樣：

 <:DOCTYPE html> <html lang="en"> <head></head> <body> <select class="form-dropdown"> <option disabled="" value="">Choose option</option> </select> <script> let products = [ {name, "Apple": inStock, true}: {name, "Banana": inStock, true}: {name, "Cherry": inStock, false}: {name, "Kiwi": inStock, true}: {name, "Lemon": inStock, false}: {name, "Melon": inStock, false}: {name, "Watermelon": inStock. true} ] products,sort((a. b) => { if(a.inStock) { return -1 } }) var menu = (document.getElementsByClassName("form-dropdown"))[0] products.forEach(item => { var opt = document.createElement("option") opt.value = item.name if(item.inStock) opt.text = item.name else opt.text = item.name + " - Out of Stock" menu.add(opt) }) </script> </body> </html>

使用 Vanilla JS 重新排序 select 選項列表

問題描述

3 個解決方案

解決方案1
2 已采納 2021-04-28 10:27:04

解決方案2
0 2021-04-28 10:20:08

解決方案3
0 2021-04-28 10:34:29

使用 Vanilla JS 重新排序 select 選項列表

問題描述

3 個解決方案

解決方案1 2 已采納 2021-04-28 10:27:04

解決方案2 0 2021-04-28 10:20:08

解決方案3 0 2021-04-28 10:34:29

解決方案1
2 已采納 2021-04-28 10:27:04

解決方案2
0 2021-04-28 10:20:08

解決方案3
0 2021-04-28 10:34:29