Reorder select option list using Vanilla JS

Hi I’ve got an option dropdown list with a list of fruit in alphabetical order with some that out of stock. What i’m trying to achieve is moving the out of stock options in the dropdown to the bottom of the list so the in stock items are displayed above those that are out of stock.

My idea was to find any option that has Out of stock in it then add a class called outOfStock and move this to the bottom of the list. To try and do this I’ve created a data value for each product using its innerHTML & search for the value “Out of stock” but this only seems to work if i have the full data value in the query. Is there a way that i can find all of the data values that has “Out of stock”? Or is there a different solution that you would suggest that i could achieve moving the out of stock items to the bottom of the options list? Any help would be appreciated

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

I’ve looked through a bunch of duplicates like this but didn’t like the answers that much, so I’m writing my own.

The easiest way is to remove the options in question, then append them again. This will move them to the end, in order.

Here’s example code:

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>

Advertisement

Answer