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

2024-05-19 • 问答

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

AAAA
BBBB - 畅销书
CCCC
等等等等

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>

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

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>

我认为这更短更简单

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>

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

iCMS 回答：更改选择选项列表中的副本 Javascript

大家都在问