Sorting/reorganising a select option list in Javascript

Question

I have a Select Option List where I have fruit in a random order, some with a "Out Of Stock" label on them. What i want to do is sort them all by alphabetical order then move the "Out Of Stock" label from the start of the flavour to the end of the flavour so they would display as: "Lemon - Out Of Stock" instead of how it currently is: "Out Of Stock - Lemon". So far I have the following where I'm looking for the "Out Of Stock" label and then adding it to the end, but not sure how I would go about removing it from the start or if there is a better way to achieve what i'm looking to do.

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.innerText += (' - Out of stock');
    }
  });

  var cl = document.querySelector('.form-dropdown');
  var clTexts = new Array();
  for (i = 1; i < cl.length; i++) {
    clTexts[i - 1] =
      cl.options[i].text.toUpperCase() + "," +
      cl.options[i].text + "," +
      cl.options[i].value;
  }
  clTexts.sort();
  for (i = 1; i < cl.length; i++) {
    var parts = clTexts[i - 1].split(',');
    cl.options[i].text = parts[1];
    cl.options[i].value = parts[2];
  }
});

<select class="form-dropdown">
  <option disabled="" value="">Choose option</option>
  <option value="6">Watermelon</option>
  <option value="2">Out of stock - Cherry</option>
  <option value="3">Kiwi</option>
  <option value="0">Apple</option>
  <option value="4">Out of stock - Lemon</option>
  <option value="1">Banana</option>
  <option value="5">Out of stock - Melon </option>
  <option value="4">Out of stock - Pineapple</option>
  <option value="1">Strawberry</option>
  <option value="5">Out of stock - Khaki</option>
</select>

testing_22 · Accepted Answer · 2021-07-09 00:56:37Z

1

You can use a function inside sort, in which you will sort the strings by some condition, in this case alphabetic order. It's used localCompare() built-in method to perform so.

Take a look:

const pattern = " - "
const chooseText = "Choose option"
const select = document.querySelector(".form-dropdown")

const children  = [...select.children]

// brings "Out of stock" to the end
children.forEach(child => child.textContent = child.textContent.split(pattern).reverse().join(pattern))

children.sort(compareChild)

function compareChild(a, b){
    const str_a = a.textContent
    const str_b = b.textContent
    // remember to not consider disabled option while sorting
    if(str_a === chooseText || str_b === chooseText) return 0;
    return str_a.localeCompare(str_b)
}

select.replaceChildren(...children)

<select class="form-dropdown">
  <option disabled="" value="">Choose option</option>
  <option value="6">Watermelon</option>
  <option value="2">Out of stock - Cherry</option>
  <option value="3">Kiwi</option>
  <option value="0">Apple</option>
  <option value="4">Out of stock - Lemon</option>
  <option value="1">Banana</option>
  <option value="5">Out of stock - Melon</option>
  <option value="4">Out of stock - Pineapple</option>
  <option value="1">Strawberry</option>
  <option value="5">Out of stock - Khaki</option>
</select>

edited Jul 9, 2021 at 0:56

answered Jul 6, 2021 at 16:17

testing_22

2,6551 gold badge17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

leek1234 Over a year ago

Thanks but this doesn't move the "Out Of Stock" Label like how i've asked from the start of the flavour to the end of the flavour

testing_22 Over a year ago

Oh, of course, now it does such thing! Check it out

Collectives™ on Stack Overflow

Sorting/reorganising a select option list in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related