在 HTML 的下拉菜单下方显示结果答案

【问题标题】：Display results below a dropdown menu in HTML在 HTML 的下拉菜单下方显示结果
【发布时间】：2022-01-04 19:50:17
【问题描述】：

我是 Stack Overflow 的新手，这是我的第一个问题。

拜托，我希望这个问题不是很愚蠢并且浪费你的任何时间，因为我在编码/编程方面的知识不是很高（几年前我参加了一个数据库课程，我学到的关于编码的大部分内容是在 EUR/USD 和时钟之间创建一个交换，哈哈）

所以我一直在尝试使用 HTML 创建某种演示文稿，您可以在其中看到几年（2020 年、2019 年等）的结果，我们希望在相应年份的结果下方立即显示，例如，如果我选择 2019 年，那么下面显示 2019 年的结果（收益、利润、亏损和不同的数字）

这里有一些基本的html代码示例：

<p>Select the year results:</p>
<select id="Year" name="Year">
    <option hidden="" disabled="disabled" selected="selected" 
        value="none">Select an Option</option>
    <option value="Year 2021">Year 2021</option>
    <option value="Year 2020">Year 2020</option>
    <option value="Year 2019">Year 2019</option>
    <option value="Year 2018">Year 2018</option>
</select>

我一直在看一些关于 HTML 的教程并进行了一些测试，并且我已经知道如何将结果链接到另一个页面，例如，如果我选择 2019 年，则会打开一个新页面并显示结果2019 年，但我想知道如何在选择菜单下方的同一页面中显示结果。我的意思是结果随着选择的“选项值”而变化。

请问有谁知道怎么做，或者有一些例子给我看，这样我就可以处理它了吗？

非常感谢大家的宝贵时间，如果这个问题很愚蠢，我很抱歉。

【问题讨论】：

标签： html web select drop-down-menu option

【解决方案1】：

您可以将onchange 添加到选择中，因此当值更改时，将执行一个javascript函数来更新您页面上的其余HTML。

这是一个没有任何格式的简单示例

const twenty = [3, 42, 100]
const twentyone = [4, 24, 1]

const updateInfo = () => {
  const select = document.getElementById('selector')
  const div = document.getElementById('output')
  let output
  if (select.value === '2020') {
    output = twenty
  }
  else if (select.value === '2021'){
    output = twentyone
  }
  div.innerHTML = '' + output
}

<select id='selector' onchange='updateInfo()'>
  <option value=2020>2020</option>
  <option value=2021>2021</option>
</select>
<div id='output'></div>

【讨论】：

非常感谢 xxkazunarixx :)

【解决方案2】：

为此，您需要一种允许您与浏览器交互的编程语言，例如 Javascript。这是非常必要的，因为它允许您在同一页面上动态插入、删除和更新元素。

文件 index.html

<html>
<head>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>

<p>Select the year results:</p>

<select id="Year" name="Year" onchange="showResults(this.options[this.selectedIndex].value)">
    <option hidden="" disabled="disabled" selected="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="result"></div>

</body>
</html>

文件 script.js

function showResults(selectedObject) {

    //Inside this function the variable "selectedObject" contains the value of the selected option.
    //From now on, Do what you want with the selected value.
    //For example: Get data from a database and display it in a table, etc.
    
    document.getElementById("result").innerHTML = "You selected: "+selectedObject;

}

【讨论】：