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

Question

我有一个选择选项列表，我想在其中移动副本"畅销书"从选项值的开始到值的结束，因此用户在眼睛上更容易看到所有按字母顺序排列的选项；畅销书"复制到末尾，使列表看起来像：

• 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>

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>