时间戳

首页 > 解决方案 > 在选择选项列表 Javascript 中更改副本

javascript - 在选择选项列表 Javascript 中更改副本

问题描述

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

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>

标签： javascriptselectoptions

解决方案

只是在-性格上分道扬镳。如果输出数组有多个元素，则反转它们。如果没有，请使用原始字符串。

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>

推荐阅读