Как сделать ссылками элементы раскрывающегося списка?

Рейтинг: 0Ответов: 3Опубликовано: 30.07.2023

У меня есть html код, в котором я создаю выпадающий список с несколькими ссылками:

<select>
    <option><a href="localhost:8080">Бел</a></option>
    <option><a href="localhost:8080/ru">Рус</a></option>
    <option><a href="localhost:8080/ua">Укр</a></option>
    <option><a href="localhost:8080/eng">Eng</a></option>
</select>

Однако эти ссылки не кликабельны, то есть по нажатию не происходит перенаправление на другую страницу. Как решить эту проблему?

html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

С помощью JS вы можете при изменении значения value у select отправлять пользователя на другую страницу

const select = document.querySelector('select');

select.addEventListener('change', function(){
  window.location.href = select.value
})
<select class="select">
    <option value="localhost:8080">Бел</option>
    <option value="localhost:8080/ru">Рус</option>
    <option value="localhost:8080/ua">Укр</option>
    <option value="localhost:8080/eng">Eng</option>
</select>

▲ 1
<form action=''>
<select name='menu'>

<option selected value='/ua/'>Украина</option>
<option value='/ru/'>Россия</option>

</select>
<input type=button value='Ok'>
</form>
▲ 0

Никак. Элементы внутри select тега не могут содержать интерактивных элементов, в том числе и ссылки. Если вам нужен выпадающий список с ссылками, чистым html не обойтись. Только добавлять css стиль и js скрипты.