Dropdown options - redirect to custom url depending to selected option

Issue

I've simple dropdown with some options.

<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
    <option value="">--Please choose an option--</option>
    <option value="https://instance1.com">Instance1</option>
    <option value="https://instance2.com">Instance2</option>
    <option value="https://instance3.com">Instance3</option>
    <option value="https://instance4.com">Instance4</option>
</select>
<button>Submit</button>

When I select example Instance3 I need to redirect to this custom url on submit.

Can anyone help me to do?

Solution

Try this!

function goToUrl(){
    window.location = document.getElementById("server-select").value;
};

<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
    <option value="">--Please choose an option--</option>
    <option value="https://instance1.com">Instance1</option>
    <option value="https://instance2.com">Instance2</option>
    <option value="https://instance3.com">Instance3</option>
    <option value="https://instance4.com">Instance4</option>
</select>
<button onclick="goToUrl()">Submit</button>

This code won't run properly in the StackOverflow's code snippet. You may have to run it by adding this to your own project.

Thanks and best regards!

Answered By - Vishal Kalansooriya