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

Question

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

Front-end Engineer

JavaScript

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

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

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

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 ещё

Простой
Подключаю air-datepicker, автоматически меняется JS (пропадает средство выбора даты AirDatepicker), как поправить?
- 1 подписчик
- 3 часа назад
- 14 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему Axios post запрос на vps сервере выдает 400 error?
- 1 подписчик
- 19 часов назад
- 47 просмотров
1

ответ
JavaScript

Средний
Как вывести сразу 2 месяца в календаре datapicker?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Нужен ли JavaScript пентестеру?
- 1 подписчик
- 07 янв.
- 190 просмотров
2

ответа
JavaScript

Простой
Как вывести число столько раз, сколько написано в input?
- 2 подписчика
- 06 янв.
- 205 просмотров
3

ответа
JavaScript

+3 ещё

Средний
Как спарсить данные с помощью 2Captcha и SpringBoot?
- 1 подписчик
- 06 янв.
- 75 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как определить время выполнения запроса post?
- 1 подписчик
- 06 янв.
- 102 просмотра
2

ответа
JavaScript

+1 ещё

Средний
Как получить bitrix_sessid в js без подключения js-библиотеки Bitrix?
- 2 подписчика
- 06 янв.
- 120 просмотров
1

ответ
JavaScript

Простой
Как передать событие клика по пуш-уведомлению в формате Ajax для увеличения счётчика кликов?
- 1 подписчик
- 05 янв.
- 39 просмотров
1

ответ
JavaScript

Простой
Как достать нужную информацию с querySelector из shadowRoot(open) Tampermonkey?
- 1 подписчик
- 05 янв.
- 48 просмотров
1

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

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Технический специалист / интегратор / разработчик (Javascript, PHP, WordPress)

HRScan

от 1 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Юзабилити-тестирование сайта с мобильного — сегодня 09.01.2025 в 15:00 по МСК

09 янв. 2025, в 11:21

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

Доработать голосового помощника на Python

09 янв. 2025, в 10:57

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

Доработать сайт на wordpress

09 янв. 2025, в 10:48

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

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

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

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

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

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