删除带有事件的项目

Question

当用户在下拉菜单上方单击时，我需要从菜单 ID 中删除除 Select 值之外的所有项目，为此我做了一个事件。

这是我尝试过的：

const menu = document.querySelector("#menu");

menu.addEventListener("click", () => {
  let sonsLength = menu.length;

  for (let i = 0; i < sonsLength; i++) {
    if (menu[i].value != "Select") {
      menu.removeChild(menu[i]);
      sonsLength = sonsLength - 1;
    }
  }
})

<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Bilbao">Bilbao</option>
  <option value="Manchester">Manchester</option>
  <option value="Paris">Paris</option>
</select>

但是我的循环并没有像我想象的那样工作，因为用户需要在下拉菜单上方单击几次才能删除除第一个项目之外的所有项目，而且根据我的理解，应该在用户点击一次。

谢谢！

Answer 1

我仍然不确定这是否是您想要实现的目标，但也许我是对的？

const menu = document.querySelector("#menu");

menu.addEventListener("change", () => {
  let sonsLength = menu.length;

  for (let i = 0; i < sonsLength;) {
    if (menu[i].value != "Select") {
      menu.removeChild(menu[i]);
      sonsLength = sonsLength - 1;
    }
    else
        i++;
  }
})

<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Bilbao">Bilbao</option>
  <option value="Manchester">Manchester</option>
  <option value="Paris">Paris</option>
</select>

回答你关于 for 循环中的 else 的问题：

如果删除数组中的一个项目，所有其他项目索引将向前移动一个位置。例如

你有一个数组

[0, 1, 2]

现在值 0 位于索引 0，值 1 位于索引 1，值 2 位于索引 2。

当你现在删除你得到的第一个元素时

[1, 2]

所以现在值 1 位于索引 0，值 2 位于索引 1。

对于我的循环，这意味着，如果您从数组中删除一个元素，则不得增加索引 (i)，因为所有其他元素都将移动到实际索引 (i)。只有当我离开一个元素时，我才必须增加索引才能到达下一个元素

Answer 2

const menu = document.querySelector("#menu");

menu.addEventListener("change", (event) => {
  let selectedValue=event.target.value;
  menu.innerHTML=`<option value=${selectedValue}>${selectedValue}</option>`;
})

<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Bilbao">Bilbao</option>
  <option value="Manchester">Manchester</option>
  <option value="Paris">Paris</option>
</select>

变化

我已经使用了select事件
使用事件侦听器获取 selected 值
使用 innerHtml 将所有选项标签替换为 selected 的

删除带有事件的项目

Delete items with event

javascript

dom-events