Как реализовать логику как в теге 'select'?

Question

[Artem Pavliienko]

Всем привет.

У меня есть список который сейчас выводиться в теге 'select'. Но нужно сделать сложнее функционал, чем позволяет этот тег. Какой именно не имеет значения. Факт в том что мне не подходят псевдоэлементы :before & :after. Мне нужно что бы внутри были блоки.

Поэтому я хочу сделать либо дивами либо списком 'li'. Но я не знаю как сделать функционал (выделения) и автоскрол как в теге 'select'. Т.е.:
1. При зажатии лкм выделяются элементы и происходит скролл есть он есть.
2. При зажатии ctrl + клик на разные элементы они выделяются.
3. При зажатии shift + клик выделяются кусок элементов.

Я знаю что есть скрипт jquery-ui selectable, он мне от части подходит, но если много элементов, автоскрола нет если мышка в самом низу или вверху блока.

Можете подсказать как это сделать или скрипт есть такой знаете. Спасибо.

Comments

[Artem Pavliienko]

Забыл упомянуть что нужно атрибут 'multiple' добавить что бы этот функционал работал.

Answer 1

[Stalker_RED]

Можете подсмотреть некоторые приемы здесь: https://jsfiddle.net/Stalk/tmgj64fn/
Хоть это и не селект, а скорее выделенеие "как в проводнике", но там есть обработка ctrl и shift и множественное выделение.

Для скролла попробуйте просто добавить overflow-y: scroll, возможно этого будет достаточно.

Comments

[Artem Pavliienko]

Большое спасибо. Попробую объединить.