How to link submit button with the <select> list in HTML?

Question

I want to create an HTML page that consists of a <select> option list, and a submit button with it. There are 3 options in the list and I want that when one option is selected and the submit button is pressed, it should open a specific page. Whereas when other option is selected, it should open a different page. Basically I want each option to open one page. How can I do the linking part with one button?

By searching I understood that I will have to use PHP for this, but I am not getting an appropriate code for it.

Here is my HTML <select> element structure.

<div>
  <h1>SELECT A TOPIC</H1>
  <select>
  <option value="physics">physics</option>
  <option value="maths">maths</option>
  <option value="chemistry">chemistry</option>
  </select> 
  <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>

I want this button to open 3 different links.

Also is there any other way that these options in the list can open pages? I learned that href tag does not work here, since only selecting an option cannot open a page. I need a submit button anyways.

Answer 1

You can achieve that using JavaScript:

<div>
  <h1>SELECT A TOPIC</h1>
  <select id="select">
    <option value="physics">physics</option>
    <option value="maths">maths</option>
    <option value="chemistry">chemistry</option>
  </select>
  <button type="button" id="submit" style="font-size: 20px;">Submit</button>
</div>
<script>
const map = {
    physics: 'physics url'
 ,maths: 'maths url'
 ,chemistry: 'chemistry url'
}
document.getElementById('submit').addEventListener('click', () =>
  location.href = map[document.getElementById('select').value])
</script>

Answer 2

The drawbacks aside, assuming you really wanted to do it, you can just do it the way you would with normal form handling (i.e. with post or get). You forgot to indicate form action and method above btw. Then you can just access selection by $_POST["submit_element_name"].