我无法从下拉菜单中正确删除项目。它会删除多个

Question

HTML创建了两个下拉菜单和一个删除按钮。在一个JavaScript中，我编写了一段代码，用数组填充这些下拉框。而且，每次我更改第一个下拉菜单上的项目时，第二个下拉菜单上将出现一组新的选项。目标是，每当我单击删除按钮时，我都应该能够删除第二个下拉菜单上的项目，当我更改第一个下拉菜单中的项目时，因此另一组选项将出现在第二个菜单上，我也应该能够从中删除一个项目。

问题是，一旦第二个下拉菜单上的项目集被更改，就会出现一堆不需要的结果，例如删除多个项目或删除另一组项目例如，如果我从"；"餐"；，它将删除一个项目。然后如果我转到"；甜点"；从那里删除一些东西，它会删除一个项目。但如果我回到"；"饭"；同样，现在删除了一堆项目。你自己试试看是什么意思

let mealListArr = ["Steak", "Pasta", "Sushi", "Burger"];
let dessertListArr = ["Ice Cream", "Cake", "Chocolate", "Candy"];
let breadListArr = ["French Bread", "White Bread", "Sour Bread", "Cookies"];
let drinkListArr = ["Coke", "Water", "Mango Shake", "Orange Juice"];
// Transfer Array to First Drop Down Menu
let menuType = document.getElementById("menu-type");
let menuTypeArr = ["Meal", "Dessert", "Bread", "Drink"];
fillDropDown(menuTypeArr, menuType);
// Transfer Array to Second Drop Down Menu
let menuList = document.getElementById("menu-list");
fillDropDown(mealListArr, menuList);
// Change List on second drop-down based on first drop-down
menuType.addEventListener("change", function () {
var menuOption = menuType.options[menuType.selectedIndex].text;
for (let i = 0; i < menuList.length; ) {
menuList.remove(0);
}
if (menuOption == "Meal") {
fillDropDown(mealListArr, menuList);
} else if (menuOption == "Dessert") {
fillDropDown(dessertListArr, menuList);
} else if (menuOption == "Bread") {
fillDropDown(breadListArr, menuList);
} else if (menuOption == "Drink") {
fillDropDown(drinkListArr, menuList);
}
});
function fillDropDown(arr, dropDown) {
for (let i = 0; i < arr.length; i++) {
let opt = arr[i];
let el = document.createElement("option");
el.textContent = opt;
el.value = opt;
dropDown.appendChild(el);
}
return arr, dropDown;
}
// Delete Item on second drop-down
let delMenuBtn = document.getElementById("menu-btn-trash");
menuOption = menuType.options[menuType.selectedIndex].text;
subMenuOption = menuList.options[menuList.selectedIndex].text;

delMenuBtn.addEventListener("click", function () {
menuList.remove(menuList.selectedIndex);
if (menuOption == "Meal") {
mealListArr.splice(mealListArr.indexOf(subMenuOption), 1);
} else if (menuOption == "Dessert") {
dessertListArr.splice(dessertListArr.indexOf(subMenuOption), 1);
} else if (menuOption == "Bread") {
breadListArr.splice(breadListArr.indexOf(subMenuOption), 1);
} else if (menuOption == "Drink") {
drinkListArr.splice(drinkListArr.indexOf(subMenuOption), 1);
}
});

<select id="menu-type"></select>
<select id="menu-list"></select>
<button id="menu-btn-trash">Delete</button>

Answer 1

你做错了什么
在实践中，您的代码存储在变量menuOption的第一个菜单中，每次您尝试删除某个内容时，它都会从第一个菜单中删除

解决方案

1. 根据需要经常调用菜单变量
2. 删除索引之前先存储索引
3. 额外：
   • 使用menuList.selectedIndex而不是drinkListArr.indexOf(subMenuOption)
   • 使用menuType.value而不是menuType.options[menuType.selectedIndex].text

let mealListArr = ["Steak", "Pasta", "Sushi", "Burger"];
let dessertListArr = ["Ice Cream", "Cake", "Chocolate", "Candy"];
let breadListArr = ["French Bread", "White Bread", "Sour Bread", "Cookies"];
let drinkListArr = ["Coke", "Water", "Mango Shake", "Orange Juice"];
// Transfer Array to First Drop Down Menu
let menuType = document.getElementById("menu-type");
let menuTypeArr = ["Meal", "Dessert", "Bread", "Drink"];
fillDropDown(menuTypeArr, menuType);
// Transfer Array to Second Drop Down Menu
let menuList = document.getElementById("menu-list");
fillDropDown(mealListArr, menuList);
// Change List on second drop-down based on first drop-down
menuType.addEventListener("change", function () {  
let menuOption = menuType.value;
for (let i = 0; i < menuList.length; ) {
menuList.remove(0);
}
if (menuOption == "Meal") {
fillDropDown(mealListArr, menuList);
} else if (menuOption == "Dessert") {
fillDropDown(dessertListArr, menuList);
} else if (menuOption == "Bread") {
fillDropDown(breadListArr, menuList);
} else if (menuOption == "Drink") {
fillDropDown(drinkListArr, menuList);
}
});
function fillDropDown(arr, dropDown) {
for (let i = 0; i < arr.length; i++) {
let opt = arr[i];
let el = document.createElement("option");
el.textContent = opt;
el.value = opt;
dropDown.appendChild(el);
}
return arr, dropDown;
}
// Delete Item on second drop-down
let delMenuBtn = document.getElementById("menu-btn-trash");

delMenuBtn.addEventListener("click", function () { 
let index = menuList.selectedIndex;
let menuOption = menuType.value;
menuList.remove(menuList.selectedIndex);
console.log(menuOption);
if (menuOption == "Meal") {
mealListArr.splice(index, 1);
} else if (menuOption == "Dessert") {
dessertListArr.splice(index, 1);
} else if (menuOption == "Bread") {
breadListArr.splice(index, 1);
} else if (menuOption == "Drink") {
drinkListArr.splice(index, 1);
}
});

<select id="menu-type"></select>
<select id="menu-list"></select>
<button id="menu-btn-trash">Delete</button>