Параметры раскрывающегося списка - перенаправление на пользовательский URL в зависимости от выбранного параметра

У меня есть простой раскрывающийся список с некоторыми параметрами.

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

Когда я выбираю пример Instance3, мне нужно перенаправить на этот пользовательский URL-адрес при отправке.

Может ли кто-нибудь помочь мне сделать?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
22
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Это позволит достичь того, что вы ищете с помощью jQuery, например: https://jsfiddle.net/rz8ty90n/

Ответ принят как подходящий

Попробуй это!

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>

Этот код не будет работать должным образом во фрагменте кода StackOverflow. Возможно, вам придется запустить его, добавив в свой собственный проект.

Спасибо и всего наилучшего!

Другие вопросы по теме