纯JavaScript实现根据第一个select选项动态更改第二个select可选内容

安全阿岳

2026-10-1

实现思路

我们可以通过遍历第二个下拉框的所有选项，根据第一个下拉框的选中值控制选项的显示/隐藏，全程使用原生JS实现，无需引入任何第三方库。

完整可运行的JS代码

方案1：通过hidden属性控制显隐（代码更简洁，适配现代浏览器）

function catch_value_types() {
    // 获取第一个下拉框的选中值
    const selectedType = document.getElementById("types").value;
    // 获取第二个下拉框的所有选项
    const allFoodOptions = document.querySelectorAll("#food option");

    // 遍历所有选项，匹配的显示，不匹配的隐藏
    allFoodOptions.forEach(option => {
        option.hidden = option.value !== selectedType;
    });

    // 兼容处理：如果当前选中的食品属于被隐藏的分类，自动切换到当前分类的第一个选项
    const currentSelected = document.querySelector("#food option:checked");
    if (currentSelected.hidden) {
        document.querySelector("#food option:not([hidden])").selected = true;
    }
}

方案2：缓存原始选项重新渲染（兼容性更强，无隐藏选项残留）

// 页面加载后预先缓存所有食品选项，避免切换时丢失数据
const foodSelect = document.getElementById("food");
const originalFoodOptions = Array.from(foodSelect.options);

function catch_value_types() {
    const selectedType = document.getElementById("types").value;
    // 先清空当前第二个下拉框的所有内容
    foodSelect.innerHTML = "";
    // 过滤出匹配当前分类的选项，添加到下拉框
    originalFoodOptions.forEach(option => {
        if (option.value === selectedType) {
            foodSelect.appendChild(option.cloneNode(true));
        }
    });
    // 默认选中当前分类的第一个选项
    foodSelect.selectedIndex = 0;
}