'Dropdown options - redirect to custom url depending to selected option

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?

javascripthtmlcss


Solution 1:[1]

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!

Solution 2:[2]

$(document).ready(function(){
    $('#server-select').change(function(){
         window.open(this.value, '_self');
    });
});

This will achieve what you are looking for with jQuery, example: https://jsfiddle.net/rz8ty90n/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vishal Kalansooriya
Solution 2 Alex

Related Questions