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

Question

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

Front-end Engineer

JavaScript

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

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

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

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

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

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

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillbox

JavaScript

3 месяца

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее

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

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

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

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

JavaScript

+1 ещё

Простой
Как сделать сложную виртуализацию?
- 1 подписчик
- 3 часа назад
- 56 просмотров
2

ответа
JavaScript

Простой
В цикле for много кнопок как сделать .addEventListener('click', к каждой кнопке?
- 1 подписчик
- 16 нояб.
- 250 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Как получить события VK.VideoPlayer используя JS?
- 1 подписчик
- 11 нояб.
- 143 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 189 просмотров
0

ответов
JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 06 нояб.
- 135 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 245 просмотров
1

ответ
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 2 подписчика
- 28 окт.
- 177 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 304 просмотра
2

ответа
JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 21 окт.
- 259 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 157 просмотров
0

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

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

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

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 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?

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

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

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