Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.50/18: Рейтинг темы: голосов - 18, средняя оценка - 4.50
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240

Реализовать список с мультивыбором на чистом JS

27.12.2015, 02:12. Показов 3815. Ответов 25
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Не по теме:

Уф, НГ уже совсем близко. Клёво. Возрадуйся же! Просто так. Чё такой унылый?


Привет! Сегодня мне пришла в голову клёвая мысль, реализовать поддержку категорий, на всякий случай.
И вот, написал я код, всё классно работает, но вот стандартное
HTML5
1
2
3
4
5
6
7
<select multiple>
 <option>Категория #1</option>
 <option selected>Категория #2</option>
 <option>Категория #3</option>
 <option selected>Категория #4</option>
 <option>Категория #5</option>
</select>
не особо радует глаз.

И я задумался о том, как же [cut] видоизменить это понурое говно.

Хочется, знаете, немного магии.

Хочется что бы пользователь мог из выпадающего списка навыбирать категорий, а они бы выводились где нибудь в клёвом месте (с небольшим крестиком, если вдруг понадобится удалить), в пределах </form>

И что бы при редактировании материала всё работало так же адекватно как <select>, ведь он хорош. Хорош, но уныл.

То, что мне удалось найти в сети, сделано на jQuery, а я, что бы вы знали, мазахист в плане кода и моё тело отторгает всевозможные библиотеки, поэтому мне бы хотелось реализации на чистом JS.

Да и впринципе если бы то что я нашёл хотя бы работало бы адекватно, везде, я бы закрыл глаза на то что это аддон к плагину родного многим JS, но нет. То что я нашёл не коректно работает например в опере.

Итак, вопрос: Кто чем может помочь? Может быть кто-нибудь видел то, о чём я прошу?
Или быть может, кто-нибудь подскажет как реализовать подобное?

Если есть вопросы, задавайте, но всё же ответы предпочтительнее.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
27.12.2015, 02:12
Ответы с готовыми решениями:

Выпадающий список с мультивыбором?
Доброго всем знатокам! Сам не осилил, прошу помощи! Есть задача, необходимо создать выпадающий список, значения в списке должны...

Реализовать скролл эффект на чистом js
Всем привет! Хочу реализовать следущую задумку. Скролю страницу, доскроливаю до нужного блока, он фиксируется и занимает все свободное...

Список: Не могу реализовать вывод, а может и правильное добавление в список.
Помогите пожалуйста. Не могу реализовать вывод, а может и правильное добавление в список. Вообщем вот код: #include &lt;stdio.h&gt; ...

25
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240
27.12.2015, 04:24  [ТС]
Для наглядности приведу пример того что ищу.
Но это работает только с jQuery.
Миниатюры
Реализовать список с мультивыбором на чистом JS  
0
 Аватар для reisal78
944 / 687 / 230
Регистрация: 28.04.2013
Сообщений: 1,925
27.12.2015, 10:28
AlexBitard, Пытаясь украсить свой новогодний пост "искрометным юмором" вы упустили один очень важный момент.

Когда создавался язык JavaScript, у него изначально было другое название: «LiveScript». Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.
Планировалось, что JavaScript будет эдаким «младшим братом» Java. Однако, история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется ECMAScript, и к Java не имеет никакого отношения.
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
27.12.2015, 12:46
Цитата Сообщение от AlexBitard Посмотреть сообщение
Но это работает только с jQuery
если это работает с jq, то это работает и на нативе
0
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240
27.12.2015, 13:27  [ТС]
BANO, предлагаете мне переписать 1257 строк для работы мельчайшего плагина?
Неужели я первый в интернетах, кому это понадобилось? Разве? Нет, ну если так, то я конечно клёвый.
Но мне почему-то кажется что есть маньяки ненавидящие jquery и побольше чем я.

Просто приведите пример того что я ищу на чистом JS.
Или дайте знать что такого точно не существует и мне прийдётся самому писать то что мне нужно.
Если это будет убедительно, так и поступлю.

Добавлено через 7 минут
reisal78, К чему тогда это обращение ко мне (которое не имеет никакого отношения к ответу на мой вопрос)?

Я даже польщён что мд хвалит мой великолепный юмор и знакомит меня с интересными фактами.
Мне кажется, если бы все вели себя так, уровень неумения обращения с ПК очень сильно упал.
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
27.12.2015, 13:59
Цитата Сообщение от AlexBitard Посмотреть сообщение
Но мне почему-то кажется что есть маньяки ненавидящие jquery и побольше чем я
вы такого встретили
это я
я ненавижу jq

AlexBitard, хотите код?
хорошо, сначала скажите откуда надо брать названия этих "селекнутых" опций, и куда их надо запихивать
0
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240
27.12.2015, 14:51  [ТС]
BANO,
Ну текущий пример использует стандартные списки:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<select data-placeholder="Выбери категории" class="chosen-select" multiple="" style="width: 100%; display: none;" tabindex="-1">
  <option>Категория #1</option>
  <option>Категория #2</option>
  <option>Категория #3</option>
  <option>Категория #4</option>
  <option>Категория #5</option>
  <option>Категория #6</option>
  <option>Категория #7</option>
  <option>Категория #8</option>
  <option>Категория #9</option>
  <option>Категория #10</option>
 </select>
Если честно я не совсем понял что вы попросили меня назвать, но могу дать ссылку на плагин и его демо

Если вы на столько альтруистичны что решили перекроить этот плагин на чистом JS, я был бы благодарен, и вы бы помогли, думаю не только мне, так как в сети я подобного найти не смог.
Но мне кажется что это заняло бы у вас всё свободное время.

Я не сомневаюсь в ваших умениях, просто мне кажется что там как-то слишком много кода.
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
27.12.2015, 22:14
AlexBitard, наверное не просто так на форуме сделаны разные сортировочки, отметочки, разделы...
наверное чтобы людям было удобно и задавать вопрос, и отвечать на заданные вопросы

Добавлено через 21 минуту
а на счёт кода
держите вот так
http://jsbin.com/kulepekagi/edit?html,output

Добавлено через 25 секунд
сюда выложу только js код
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
    var $ = document.getElementById.bind(document);
    [].forEach.call($("selected").children, function (el) {
        el.onclick = unselect;
    });
    [].forEach.call($("toSelect").children, function (el) {
        el.onclick = select;
    });
    function select() {
        $("selected").appendChild(this.parentNode.removeChild(this)).onclick = unselect;
    }
    function unselect() {
        $("toSelect").appendChild(this.parentNode.removeChild(this)).onclick = select;
    }
0
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
27.12.2015, 22:18
AlexBitard, Вполне прикольная штука если делать такое впервые, важно чтобы работало везде и на ie8. А в общем-то задача тривиальная: хеш, клонируем текст|значение.
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
27.12.2015, 22:24
Padimanskas, пусть значения в data-* заносятся, чтобы невыдалбываться постоянно их кешировать и записывать в массивы
пусть это будет привязка к dom
0
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240
27.12.2015, 23:03  [ТС]
Как отправить выбранные элементы? Например сабмитом в форме.
0
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
27.12.2015, 23:04
https://jsfiddle.net/3bhvegg8/
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
document.forms.form.select.onchange = function (e) {
    var e = e || window.event,
    target = e.target || e.srcElement,
    ul = this.nextElementSibling || this.nextSibling,
    li = document.createElement('LI'),
    cross = document.createElement('A');
 
    cross.setAttribute('href', '#');
    cross.setAttribute('data-rem', 'true');
 
    cross.appendChild(document.createTextNode('X'));
 
    li.appendChild(target.children[target.selectedIndex].firstChild.cloneNode(true));
    li.appendChild(cross);
    ul.appendChild(li);
};
 
document.onclick = function (e) {
    var e = e || window.event,
    target = e.target || e.srcElement,
    ul, li = null;
    if (!target.hasAttribute('data-rem')) return false;
    li = target.parentNode;
    ul = li.parentNode;
    ul.removeChild(li);
};
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
27.12.2015, 23:14
Padimanskas, кода много, а смысла?

AlexBitard, вот вам
функция getValues возвращает массив значений выбранных элементов

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    var $ = document.getElementById.bind(document);
    [].forEach.call($("selected").children, function (el) {
        el.onclick = unselect;
    });
    [].forEach.call($("toSelect").children, function (el) {
        el.onclick = select;
    })
    function select() {
        $("selected").appendChild(this.parentNode.removeChild(this)).onclick = unselect;
      $("tosend").innerHTML=getValues()
    }
    function unselect() {
        $("toSelect").appendChild(this.parentNode.removeChild(this)).onclick = select;
      $("tosend").innerHTML=getValues()
    }
  function getValues(){
    return [].map.call($("selected").children,function(el){
      return el.dataset.value
    })
  }
0
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
27.12.2015, 23:48
BANO, Читай код, тогда дойдет мб
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
27.12.2015, 23:59
Padimanskas, да понял я, что ты делегирование использовал, но как видишь мой код рабочий и короткий
0
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
28.12.2015, 00:08
Цитата Сообщение от BANO Посмотреть сообщение
да понял я, что ты делегирование использовал, но как видишь мой код рабочий и короткий
там явно указаны признаки саппорта для восьмого осла, который все еще устанавливается вместе с винсемь. Таким образом имеем
JavaScript
1
2
3
window.event
e.srcElement
this.nextSibling
voila
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
28.12.2015, 00:35
Цитата Сообщение от Padimanskas Посмотреть сообщение
там явно указаны признаки саппорта для восьмого осла
при этом я использую просто документированные функции, которые осёл и так понимает
в общем ваши явные признаки, ничего кроме явности не дают
а мои неявные использования фич дают краткость код и его работоспособность)
0
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240
28.12.2015, 00:58  [ТС]
BANO, сейчас с ноута, но вроде бы то что нужно. Буду у компа, попробую использовать этот вариант.

И да, действительно очень коротко.

Единственное чего я так и не понимаю прямо сейчас, как бы мне передать эти значения.
Про getValues я понял, но как отправить серверу эти значения.

Конечно же можно послать значения через js, только это в голову и приходит сейчас.

Но как отправить их через обычную форму?
Ведь она может только инпуты передавать.
0
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
28.12.2015, 01:15
Цитата Сообщение от BANO Посмотреть сообщение
при этом я использую просто документированные функции, которые осёл и так понимает
кхм) не понимает. IE8 не знает что такое forEach, ни bind. Как, в прочем, и все остальное из этого снипета воспринимается осликом исключительно через жопу. Лучше расскажи что ты там куришь, а то я подумаю что ты всерьез гонишь эту дичь)
0
-13 / 2 / 0
Регистрация: 14.08.2014
Сообщений: 240
30.12.2015, 02:33  [ТС]
BANO, вопрос по прежнему актуален. Если вы вдруг потеряли тему.
Повторюсь, подскажите как передать значения вашего решения формой.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
30.12.2015, 02:33
Помогаю со студенческими работами здесь

Создать класс «Квартира», в котором список комнат реализовать как односвязный список
Добрый день,написал фот такой клас по заданию:Создать класс «Квартира», в котором список комнат реализовать как односвязный список....

Реализовать кольцевой список. Как закольцевать список обычный?
Помогите пожалуйста реализовать кольцевой список. Я так понимаю, он может быть двусвязным и односвязным? Меня интересует односвязный....

Select c мультивыбором и поиском
Здравствуйте, извините если не в тот раздел написал, подскажите как сделать select c мультивыбором и поиском, нашел ссылку того как хочу но...

Select с поиском с мультивыбором
Здравствуйте можете подсказать как сделать поиск по select и чтоб при этом был еще с мультивыбором? Добавлено через 2 минуты сейчас...

Помогите с мультивыбором в MS Access
Пожалуйста помогите с такой вот проблемой: Представте: есть БД, допустим 'Видеопрокат', есть таблица по фильмам ('Фильмы'), и есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru