HTML如何在下拉菜单下方动态展示对应选中年份的结果数据

实现方案 #

你需要的无跳转动态展示效果可以通过原生JavaScript监听下拉框的选择事件实现，不需要引入额外框架，修改成本极低，以下是完整可直接运行的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>年度经营数据查询</title>
</head>
<body>
<p>Select the year results:</p>
<select id="Year" name="Year">
    <option hidden disabled selected value="none">Select an Option</option>
    <option value="2021">Year 2021</option>
    <option value="2020">Year 2020</option>
    <option value="2019">Year 2019</option>
    <option value="2018">Year 2018</option>
</select>
<!-- 数据展示容器，样式可以自行调整 -->
<div id="resultContainer" style="margin-top: 20px;padding: 12px;border: 1px solid #e5e7eb;border-radius: 4px;"></div>

<script>
// 1. 提前定义各年份对应数据，可根据实际需求修改字段、数值
const yearFinanceData = {
    "2021": {
        "总营收": "1260万元",
        "净利润": "328万元",
        "亏损额": "0元",
        "同比增速": "22.4%"
    },
    "2020": {
        "总营收": "976万元",
        "净利润": "207万元",
        "亏损额": "0元",
        "同比增速": "14.8%"
    },
    "2019": {
        "总营收": "845万元",
        "净利润": "162万元",
        "亏损额": "0元",
        "同比增速": "31.7%"
    },
    "2018": {
        "总营收": "619万元",
        "净利润": "72万元",
        "亏损额": "14.6万元",
        "同比增速": "-"
    }
}

// 2. 获取页面元素
const selectDom = document.getElementById('Year')
const resultDom = document.getElementById('resultContainer')

// 3. 监听下拉框选择变化，动态渲染数据
selectDom.addEventListener('change', function () {
    const selectedYear = this.value
    // 选中默认空选项时清空展示区
    if (selectedYear === 'none') {
        resultDom.innerHTML = ''
        return
    }
    // 匹配对应年份数据
    const currentData = yearFinanceData[selectedYear]
    // 拼接展示内容
    let showHtml = `<h4>${selectedYear}年经营数据</h4><ul>`
    for (let item in currentData) {
        showHtml += `<li>${item}：${currentData[item]}</li>`
    }
    showHtml += '</ul>'
    // 内容写入页面
    resultDom.innerHTML = showHtml
})
</script>
</body>
</html>

自定义修改说明 #

• 数据调整：直接修改yearFinanceData对象中的内容即可，新增年份、新增数据字段都不需要修改其他逻辑，只要保证对象的键和下拉框option的value对应即可
• 样式调整：修改resultContainer的style属性，或者单独写CSS样式都可以
• 如果后续需要从后端接口动态拉取数据，只需要把事件里匹配固定数据的逻辑换成fetch/axios请求接口拿对应年份数据即可，渲染逻辑不需要改动

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