Как реализовать аналог тега select с помощью JavaScript?

Question

Сергей Некрасов @Judixel

Front-end Engineer

JavaScript

Как реализовать аналог тега select с помощью JavaScript?

Как реализовать аналог тега <select> с мультивыбором на js и css без использования jquery?

Вопрос задан более трёх лет назад
3539 просмотров

4 комментария

Подписаться 5 Оценить 4 комментария

Константин Романов @evanto

Напиши подробнее

Написано более трёх лет назад

Сергей Некрасов @Judixel Автор вопроса

Тестовое задание такое, я делал вот так:

<html>
<div class="droplink">
    <a class="list" onClick="down()">Открыть список</a>
    <ul id="dropdown" style="display:none"> 
      <li class="item-1"><a href="#" target="_blank">Пункт 1</a></li>
      <li class="item-2"><a href="#" target="_blank">Пункт 2</a></li>
      <li class="item-3"><a href="#" target="_blank">Пункт 3</a></li>
      <li class="item-4"><a href="#" target="_blank">Пункт 4</a></li>
      <li class="item-5"><a href="#" target="_blank">Пункт 5</a></li>
    </ul> 
    </div>
</html>

function down()
{
  var a = document.getElementById('dropdown');
  if ( a.style.display == 'none' )
    a.style.display = 'block'
  else
    if ( a.style.display == 'block' )
    a.style.display = 'none';
};

Но получается просто меню с выпадающим списком, а нужен аналог тега select, чтобы была функция выбора пунктов

Написано более трёх лет назад

Константин Величко @Zoxon

Зачем? используйте HTML

<select name="select" size="3" multiple="multiple">
          <option selected="selected">Чебурашка</option>
          <option>Крокодил Гена</option>
          <option>Шапокляк</option>
          <option>Крыса Лариса</option>
</select>

Написано более трёх лет назад

Alexey Sosnovsky @sosnovskyas

Константин Величко потому что простой select браузерами разными под разными осями рисуется как попало!
если кто нашёл решение поделитесь пожалуйста. для меня вопрос актуален по сей день. необходимо чтоб после выбора сохранялся текущий выбранный пункт а не просто чтоб как менюшка работало

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Сложный
Почему не вызывается функция с export и без него если в теге script указан type="module"?
- 1 подписчик
- 51 минуту назад
- 24 просмотра
1

ответ
JavaScript

Простой
Зачем тут используется apply?
- 1 подписчик
- час назад
- 41 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 12 часов назад
- 47 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 1 подписчик
- 14 часов назад
- 76 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как из php передать ошибки в js?
- 1 подписчик
- 14 часов назад
- 143 просмотра
2

ответа
JavaScript

Простой
Что не так при выполнении Get запроса в Chrome?
- 1 подписчик
- 15 часов назад
- 257 просмотров
2

ответа
JavaScript

Простой
.toLocaleString() js. Как вывести в input и в totalAmountOfCredit ( не могу догнать как подключить )?
- 1 подписчик
- 16 часов назад
- 24 просмотра
2

ответа
JavaScript

+4 ещё

Простой
Что делать, если после залива приложения на VPS страница остается недоступной?
- 1 подписчик
- 18 часов назад
- 68 просмотров
1

ответ
JavaScript

Простой
Можно ли сократить запись и как?
- 1 подписчик
- 19 часов назад
- 114 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Почему не срабатывает HapticFeedback?
- 1 подписчик
- 22 часа назад
- 42 просмотра
0

ответов
Показать ещё Загружается…

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Тильда дизайн + сверстать + интеграции

16 апр. 2024, в 10:32

8000 руб./за проект

C# WPF десктопное приложение для алготрейдинга в сфере криптовалют

16 апр. 2024, в 09:59

50000 руб./за проект

Работы по сайту для оптимизации

16 апр. 2024, в 08:46

500 руб./за проект

Тестовое задание такое, я делал вот так:

<html> <div class="droplink"> <a class="list" onClick="down()">Открыть список</a> <ul id="dropdown" style="display:none"> <li class="item-1"><a href="#" target="_blank">Пункт 1</a></li> <li class="item-2"><a href="#" target="_blank">Пункт 2</a></li> <li class="item-3"><a href="#" target="_blank">Пункт 3</a></li> <li class="item-4"><a href="#" target="_blank">Пункт 4</a></li> <li class="item-5"><a href="#" target="_blank">Пункт 5</a></li> </ul> </div> </html>

function down() { var a = document.getElementById('dropdown'); if ( a.style.display == 'none' ) a.style.display = 'block' else if ( a.style.display == 'block' ) a.style.display = 'none'; };

Но получается просто меню с выпадающим списком, а нужен аналог тега select, чтобы была функция выбора пунктов
Зачем? используйте HTML
<select name="select" size="3" multiple="multiple"> <option selected="selected">Чебурашка</option> <option>Крокодил Гена</option> <option>Шапокляк</option> <option>Крыса Лариса</option> </select>
Константин Величко потому что простой select браузерами разными под разными осями рисуется как попало!
если кто нашёл решение поделитесь пожалуйста. для меня вопрос актуален по сей день. необходимо чтоб после выбора сохранялся текущий выбранный пункт а не просто чтоб как менюшка работало

Как реализовать аналог тега select с помощью JavaScript?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт