更改 select 选项列表中的副本 Javascript

Question

我有一个 select 选项列表，我想将副本“Bestseller”从选项值的开头移动到值的末尾，以便用户更容易看到所有选项均按字母顺序排列，并在末尾看到“畅销书”副本，因此列表如下所示：

AAAA
BBBB - 畅销书
中交会
等等等等

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>

Answer 1

只是在 - 字符上拆分。如果输出数组有多个元素，则将它们反转。如果不是，则使用原始字符串。

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

仅供参考：执行此操作后，您必须对选项进行排序以获得所需的字母顺序。

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>

Answer 2

我觉得这个更短更简单

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 - 有趣的是长度相同

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>

更改 select 选项列表中的副本 Javascript

Changing copy in a select option list Javascript

javascript

select

options