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

Question

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

Front-end Engineer

JavaScript

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

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

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

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 браузерами разными под разными осями рисуется как попало!
если кто нашёл решение поделитесь пожалуйста. для меня вопрос актуален по сей день. необходимо чтоб после выбора сохранялся текущий выбранный пункт а не просто чтоб как менюшка работало

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

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

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

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

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

JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 1 подписчик
- 22 часа назад
- 87 просмотров
2

ответа
JavaScript

Простой
Будет ли корректно работать сортировка везде?
- 1 подписчик
- 23 часа назад
- 79 просмотров
3

ответа
JavaScript

Простой
Почему ничего не происходит — элементы p не добавляются на страницу?
- 1 подписчик
- вчера
- 49 просмотров
1

ответ
JavaScript

Простой
Почему при написании цикла for of работает, а при другом цикле не работает?
- 1 подписчик
- 15 апр.
- 368 просмотров
3

ответа
JavaScript

Простой
Почему зависает приложение? Почему не работает функция сортировки?
- 1 подписчик
- 14 апр.
- 236 просмотров
1

ответ
JavaScript

Простой
Почему не работает фильтрация?
- 1 подписчик
- 14 апр.
- 166 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 719 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 671 просмотр
4

ответа
JavaScript

+1 ещё

Простой
Как остаться на той же странице при скачивании файла?
- 1 подписчик
- 08 апр.
- 304 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как отправить ajax запрос по чекбоксам?
- 2 подписчика
- 07 апр.
- 219 просмотров
1

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

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Fullstack developer (python/react)

Крона Лабс • Екатеринбург

от 200 000 ₽

Frontend Developer (Vue.js) Middle / Senior

UPBEAT SOFT

от 150 000 до 300 000 ₽

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

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

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

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

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