CODEWITHSUNDEEP
javascripthtml-select
harryJamesJS
harryJamesJS

Reputation: 69

Changing copy in a select option list Javascript

I have a select option list, where I want to move the copy "Bestseller" from the start of the option value to the end of the value so it's easier on the eye for a user to see the options all in alphabetical order and seeing the "Bestseller" copy at the end so the list would look like:

document.querySelectorAll('.dropdown').forEach(function(select) {
  Array.from(select.options).forEach(function(option) {
    if (option.innerText.includes("Bestseller")) {
      select.insertBefore(option, select.options[1]);
    }
  });
  var selectOption = document.querySelector('.dropdown');
  var copy = new Array();
  for (i = 1; i < selectOption.length; i++) {
    copy[i - 1] =
      selectOption.options[i].text.toUpperCase() + "," +
      selectOption.options[i].text + "," +
      selectOption.options[i].value;
  }
  copy.sort();
  for (i = 1; i < selectOption.length; i++) {
    var parts = copy[i - 1].split(',');
    selectOption.options[i].text = parts[1];
    selectOption.options[i].value = parts[2];
  }
});
<select class="dropdown">
  <option disabled="" value="">Select option</option>
  <option>GGGG</option>
  <option>Bestseller - TTTT</option>
  <option>KKKK</option>
  <option>AAAA</option>
  <option>Bestseller - PPPP</option>
  <option>CCCC</option>
  <option>Bestseller - BBBB </option>
  <option>Bestseller - ZZZZ</option>
  <option>EEEE</option>
  <option>Bestseller - IIII</option>

</select>

Upvotes: 0

Views: 90

Answers (2)

mplungjan
mplungjan

Reputation: 178285

I think this is shorter and simpler

document.querySelectorAll('.dropdown').forEach(sel => {
  const opts = [...sel.options]
  sel.innerHTML = opts
    .map(opt => {
      let val = opt.value;
      if (val.includes("Bestseller - ")) {
        val = val.replace(/Bestseller - /, "")
        opt.value = val;
        opt.text = val + " - Bestseller"; // remove the - Bestseller here if you want
      } 
      return opt.outerHTML;
    })
    .sort()
    .join("")
  sel.selectedIndex = 0;
});
<select class="dropdown">
  <option disabled="" value="">Select option</option>
  <option>GGGG</option>
  <option>Bestseller - TTTT</option>
  <option>KKKK</option>
  <option>AAAA</option>
  <option>Bestseller - PPPP</option>
  <option>CCCC</option>
  <option>Bestseller - BBBB </option>
  <option>Bestseller - ZZZZ</option>
  <option>EEEE</option>
  <option>Bestseller - IIII</option>

</select>

ES5 - funnily same length

document.querySelectorAll('.dropdown').forEach(sel => {
  let opts = sel.options;
  let arr = []
  for (let i = 0; i < opts.length; i++) {
    let opt = opts[i];
    let val = opt.value; 
    if (val.indexOf("Bestseller - ") != -1) {
      val = val.replace(/Bestseller - /, "")
      opt.value = val;
      opt.text = val + " - Bestseller"; // remove the - Bestseller here if you want
    }
    arr.push(opt.outerHTML);
  }
  arr.sort();
  sel.innerHTML = arr.join("")
  sel.selectedIndex = 0;
});
<select class="dropdown">
  <option disabled="" value="">Select option</option>
  <option>GGGG</option>
  <option>Bestseller - TTTT</option>
  <option>KKKK</option>
  <option>AAAA</option>
  <option>Bestseller - PPPP</option>
  <option>CCCC</option>
  <option>Bestseller - BBBB </option>
  <option>Bestseller - ZZZZ</option>
  <option>EEEE</option>
  <option>Bestseller - IIII</option>

</select>

Upvotes: 1

Liftoff
Liftoff

Reputation: 25392

Just split on the - character. If the output array has more than one element, reverse them. If not, use the original string.

let comps = parts[1].split("-");
if(comps.length > 1)
  selectOption.options[i].text = comps[1] + " - " + comps[0];
else
  selectOption.options[i].text = parts[1];

FYI: You will have to sort the options after doing this to get the alphabetical order you desire.

document.querySelectorAll('.dropdown').forEach(function(select) {
  Array.from(select.options).forEach(function(option) {
    if (option.innerText.includes("Bestseller")) {
      select.insertBefore(option, select.options[1]);
    }
  });
  var selectOption = document.querySelector('.dropdown');
  var copy = new Array();
  for (i = 1; i < selectOption.length; i++) {
    copy[i - 1] =
      selectOption.options[i].text.toUpperCase() + "," +
      selectOption.options[i].text + "," +
      selectOption.options[i].value;
  }
  copy.sort();
  for (i = 1; i < selectOption.length; i++) {
    var parts = copy[i - 1].split(',');
    let comps = parts[1].split("-");
    if(comps.length > 1)
      selectOption.options[i].text = comps[1] + " - " + comps[0];
    else
      selectOption.options[i].text = parts[1];
    selectOption.options[i].value = parts[2];
  }
});
<select class="dropdown">
  <option disabled="" value="">Select option</option>
  <option>GGGG</option>
  <option>Bestseller - TTTT</option>
  <option>KKKK</option>
  <option>AAAA</option>
  <option>Bestseller - PPPP</option>
  <option>CCCC</option>
  <option>Bestseller - BBBB </option>
  <option>Bestseller - ZZZZ</option>
  <option>EEEE</option>
  <option>Bestseller - IIII</option>

</select>

Upvotes: 1

Related Questions