二级联动下拉菜单切换后删除功能异常问题求助

你的问题根源在于删除按钮的事件处理中，没有实时获取当前选中的分类和子选项——你在页面初始化时就把menuOption和subMenuOption的值固定了，后续切换分类后，删除操作依然在使用最初的变量值，自然会出现跨分类误删、删错元素的情况。

关键修改点 #

• 实时获取选中状态：把获取当前分类和选中子选项的代码移到删除按钮的点击事件内部，每次点击都重新获取最新值
• 增加选中校验：防止用户未选中任何选项时点击删除导致报错
• 优化下拉清空逻辑：用menuList.innerHTML = ''替代循环删除，更简洁高效

修正后的完整代码 #

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;
    // 简化清空逻辑
    menuList.innerHTML = '';
    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);
    }
}

// Delete Item on second drop-down
let delMenuBtn = document.getElementById("menu-btn-trash");
delMenuBtn.addEventListener("click", function () {
    // 实时获取当前选中的分类和子选项
    const selectedTypeIndex = menuType.selectedIndex;
    const selectedListIndex = menuList.selectedIndex;
    
    // 先判断是否有选中项
    if (selectedListIndex === -1) {
        alert("请先选择要删除的选项");
        return;
    }
    
    const menuOption = menuType.options[selectedTypeIndex].text;
    const subMenuOption = menuList.options[selectedListIndex].text;
    
    // 删除下拉菜单中的选项
    menuList.remove(selectedListIndex);
    
    // 删除对应数组中的元素
    switch(menuOption) {
        case "Meal":
            mealListArr.splice(mealListArr.indexOf(subMenuOption), 1);
            break;
        case "Dessert":
            dessertListArr.splice(dessertListArr.indexOf(subMenuOption), 1);
            break;
        case "Bread":
            breadListArr.splice(breadListArr.indexOf(subMenuOption), 1);
            break;
        case "Drink":
            drinkListArr.splice(drinkListArr.indexOf(subMenuOption), 1);
            break;
    }
});

HTML #

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

额外优化建议 #

可以把分类和对应的数组整合为一个对象，减少重复的条件判断逻辑，让代码更易维护：

// 整合分类与数据
const menuData = {
    "Meal": ["Steak", "Pasta", "Sushi", "Burger"],
    "Dessert": ["Ice Cream", "Cake", "Chocolate", "Candy"],
    "Bread": ["French Bread", "White Bread", "Sour Bread", "Cookies"],
    "Drink": ["Coke", "Water", "Mango Shake", "Orange Juice"]
};

// 填充第一个下拉菜单时直接用对象的键
fillDropDown(Object.keys(menuData), menuType);

// 切换分类时的逻辑简化
menuType.addEventListener("change", function () {
    const selectedType = menuType.options[menuType.selectedIndex].text;
    menuList.innerHTML = '';
    fillDropDown(menuData[selectedType], menuList);
});

// 删除时的逻辑简化
delMenuBtn.addEventListener("click", function () {
    const selectedTypeIndex = menuType.selectedIndex;
    const selectedListIndex = menuList.selectedIndex;
    
    if (selectedListIndex === -1) {
        alert("请先选择要删除的选项");
        return;
    }
    
    const selectedType = menuType.options[selectedTypeIndex].text;
    const selectedItem = menuList.options[selectedListIndex].text;
    
    menuList.remove(selectedListIndex);
    menuData[selectedType].splice(menuData[selectedType].indexOf(selectedItem), 1);
});

这样后续新增分类只需要在menuData里添加键值对即可，不需要修改多处逻辑。

内容的提问来源于stack exchange，提问作者CJ Velasco