Бывают задачи, когда мы хотим перенаправить пользователя по ссылке при выборе того или иного option в теге списка select. Сделать это просто вставкой ссылок не получится (переход по ссылке не будет происходить).
Однако есть вполне несложный способ реализовать эту задачу.
Select с рабочими ссылками
Итак, для того, чтобы реализовать переход по ссылкам при выборе какого либо option у тега select нам нужно сделать все две вещи:
- Поместить необходимую ссылку в атрибут value тега option.
- Повесить на тег select событие onchange и когда оно происходит перенаправлять по ссылке из выбранного option.
Код всего этого может выглядеть примерно следующим образом:
<div> <select class="form-select" onchange="window.location.href = this.options[this.selectedIndex].value"> <option selected disabled>Куда перейти:</option> <option value="https://getbootstrap.com/">Bootstrap Doc</option> <option value="https://website-create.ru">Website-create.ru</option> </select> </div>
Результат работы можете посмотреть ниже, через CodePen.
Как видите, реализовать переход из select option совсем не сложно.
Надеюсь этот пост был вам полезен. Не стесняйтесь оставлять комментарии.
Всем удачи.
Как всегда – все гениальное… ))