如何根据下拉菜单选择显示指定HTML元素，默认隐藏两个柱状图

实现方案 #

1. 调整CSS样式 #

首先给图表容器设置默认隐藏规则，新增激活状态的显示样式，修改后的CSS如下：

/* 原有样式保留，新增/修改以下部分 */
.chart-container{
    display: none; /* 默认隐藏所有图表容器 */
    padding: 20px;
    min-height: 100%;
}
/* 新增激活类，匹配时显示图表 */
.chart-container.active {
    display: flex;
}

.chart{
    border: 1px black solid;
    width: 500px;
}

.salary{
    margin: 20px;
}

.age{
    margin: 20px;
}

.name{
    margin: 20px;
}

2. 添加JavaScript控制逻辑 #

监听下拉菜单的选择事件，根据选中值切换对应图表的显示状态：

// 获取DOM元素
const selectEl = document.getElementById('option');
const salaryChart = document.querySelector('.salary-chart');
const ageChart = document.querySelector('.age-chart');

// 监听下拉菜单变化事件
selectEl.addEventListener('change', function() {
    // 先隐藏所有图表
    salaryChart.classList.remove('active');
    ageChart.classList.remove('active');
    
    // 根据选中值显示对应图表
    const selectedValue = this.value.trim();
    if (selectedValue === 'Sort by Salary') {
        salaryChart.classList.add('active');
    } else if (selectedValue === 'Sort by Age') {
        ageChart.classList.add('active');
    }
    // 选中select选项时无需额外操作，已经全部隐藏
});

补充说明 #

你原有HTML中<input>标签嵌套<select>的写法不符合规范，input是单标签不需要闭合包裹其他元素，你可以直接移除没用的<input type="number" id="options" value="" style="display:none">和对应的闭合标签，不影响功能运行。

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