javascript - 使用 Javascript 按字母顺序设置选择

Question

我有一个项目，我需要按字母顺序设置选择选项。这是我的 HTML 代码：

<select id=”carmakes”&gt;
    <option value="Volvo">Volvo</option>
    <option value="Mercedes">Mercedes</option>
    <option value="Audi">Audi</option>
    <option value="Saab">Saab</option>
</select>

这是我的脚本：

function alphabeticalOrder() {
    let value = document.getElementsByTagName("select")[0];
    for (let i = 0; i < value.children.length - 1; i++) {
        if (value.children[i].innerHTML < value.children[i + 1].innerHTML) {
            let temp = value.children[i].innerHTML;
            value.children[i].innerHTML = value.children[i + 1].innerHTML;
            value.children[i + 1].innerHTML = temp;
        }
    }
    return value;
}

我试过使用排序，但我似乎无法让它工作。

标签： javascript

Answer 1

正如 scunliffe 所提到的，在这种情况下，最好从 JS 中的值而不是 HTML 中开始。尝试这个：

const makes = [
  'Volvo',
  'Mercedes',
  'Audi',
  'Saab'
];

const sortedMakes = makes.sort((a,b) => {
  if (a === b)
    return 0;
  if (a < b)
    return -1;
  return 1;
});

const selectEl = document.getElementById('carmakes');

for(const make of sortedMakes) {
  const newOpt = document.createElement('option');
  newOpt.value = make;
  newOpt.innerHTML = make;
  selectEl.appendChild(newOpt);
}

<select id="carmakes"></select>

如果您必须使用以 HTML 开头的值对其进行排序，您可以这样做：

const selectEl = document.getElementById('carmakes');
const makes = Array.from(selectEl.getElementsByTagName('option'))
  .map(el => el.innerText);

const sortedMakes = makes.sort((a,b) => {
  if (a === b)
    return 0;
  if (a < b)
    return -1;
  return 1;
});

while(selectEl.firstChild) {
  selectEl.firstChild.remove();
}

for(const make of sortedMakes) {
  const newOpt = document.createElement('option');
  newOpt.value = make;
  newOpt.innerHTML = make;
  selectEl.appendChild(newOpt);
}

<select id="carmakes">
  <option value="Volvo">Volvo</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Audi">Audi</option>
  <option value="Saab">Saab</option>
</select>