Параметры раскрывающегося списка - перенаправление на пользовательский 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 css javascript

17.05.2022 13:09

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

17.05.2022 13:15

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

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

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. Возможно, вам придется запустить его, добавив в свой собственный проект.

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

17.05.2022 13:54