Display results below a dropdown menu in HTML-CodePudding

I am new on Stack Overflow and this is my first question.

Please, I hope the question is not very silly and waste any of your time because my knowledge in coding/programming is not very high (I did a database course a few years ago and most I learned to do about coding was to create an exchange between EUR/USD and a clock lol)

So I have been trying to create like some sort of presentation with HTML where you can see the results of several years (2020, 2019, etc) and we would like to display immediately below the results to the corresponding year, for example if I select year 2019 then below show results for 2019 (earnings, profit, losses and different numbers)

Here there is some basic example of the html code:

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

< select id="Year" name="Year" >

< option hidden="" disabled="disabled" selected="selected" value="none">Select an Option

< option value="Year 2021">Year 2021

< option value="Year 2020">Year 2020

< option value="Year 2019">Year 2019

< option value="Year 2018">Year 2018

< /select >

I have been looking some tutorials about HTML and testing a little bit and I already know how to link the results to another page, like for example if I select Year 2019 then a new page is opened and it shows the results of 2019 year, but I would like to know how to show the results in the same page just below the selection menu. I mean the results change together with the "option value" selected.

So does anyone please know how to do this or have some example to show me so I can work on it?

Thank you all very much for your time and I am sorry if the question is very silly.

CodePudding user response：

You can add onchange to the select, so when the value changes, a javascript function is executed that updates the rest of the HTML on your page.

Here is a simple example without any formatting

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>

CodePudding user response：

For this you need a programming language that allows you to interact with the browser, such as Javascript. This is very necessary as it will allow you to dynamically insert, delete and update elements on the same page.

File 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>

File 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;

}