删除带有事件的项目

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循环中的其他问题：

如果移除数组中的某个项，则所有其他项索引都会向前移动一个位置。例如

你有一个阵列

[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事件
• 使用事件listner获取所选值
• 使用innerHtml将所有选项标记替换为选定的选项标记