Работа с html select в режиме multiple, отличия от обычного режима

HTML select с флагом multiple позволяет сделать выбор нескольких значений. В этой статье мы рассмотрим как правильно обработать данные, используя javascript и PHP.

Вот так выглядит пример HTML кода формы для выпадающего списка с возможностью выбора нескольких значений.

В этом режиме поле select отображается браузером не как элемент с выпадающим списком. Для сравнения, посмотрите как выглядит один и тот же select в браузере без флажка multiple и с ним:

Читаем значения поля SELECT из javaScript.

В чем отличие от одиночного режима (без multiple флага)? В том и другом случаях можно прочитать значение поля через свойство элемента value. Но так мы получим только одно единственное значение. Как получить все значения, выбранные пользователем в списке?

Мы будем программно проверять включен ли флаг multiple, и в соответствии с ситуацией выбирать способ как получить значения(-ие). Для универсальности можно складывать значения в некоторый массив.  Если multiple == true — надо сканировать массив options, иначе достаточно обратиться к свойству value.

Как прочитать множественные значения, передаваемые в программу на PHP?

Если вы используете HTML код, вроде приведенного в начале статьи, то при выборе нескольких значений будут отправлены данные формы вида:

Которые в PHP будут интерпретированы как GET параметр $_GET[‘elm’] = ‘ny’. Т.е. вы получите всего одно значение.

Чтение raw данных

Если поменять метод формы на POST, то можно прочитать входные данные из потока php://input

Вы получите всю строку — «elm=msk&elm=paris&elm=london&elm=ny», но её нужно будет ещё правильно разобрать. Потому так не делают, а идут на небольшую хитрость. К имени поля в HTML добавляют квадратные скобки:

Благодаря этому приему массив $_REQUEST в PHP сразу получает переменную elm в виде массива значений. Т.е.

Мало букафф? Читайте есчо !

Манипуляции с битами в JS

Май 12, 2023 г.

Рассмотрим три операции - установка нужного бита в числе, сброс бита и инверсия. У нас есть число N и номер бита i. Номер бита нумерует биты, начиная с нуля. Прежде всего нам понадобится маска, с помощью которой мы произведем нужную нам операцию. ...

Читать

Вывод в swiper.js слайдере кастомных булетов

Ноябрь 22, 2019 г.

Специально для Артура, задающего вопрос в статье про swiper, привожу пример как вывести в swiper.js вместо штатных булетов навигации некие кастомные текстовые метки. Swiper.js позволяет глубоко кастомизировать все свои элементы. Достаточно обратиться ...

Читать

Организация не дискретной навигации в Swiper

Март 21, 2025 г.

Один из режимов навигации в Swiper - называется freemode. Он позволяет листать слайды (тащить мышкой или свайпить) без фиксации на границах слайда. Но если вы используете навигацию, то перелистывание будет производиться дискретно по слайдам. В ...

Читать

Как перезагрузить страницу из js

Сентябрь 20, 2018 г.

Наиболее широко встречается следующий способ: [crayon-689597b4c93e7426681134/] Он инициирует setter локации, заставляя браузер выполнить переход на указанную страницу. Не все браузеры поддаются на данную уловку. Если не указать отличное от прежнего ...

Читать
 

Комментарии к «Работа с html select в режиме multiple, отличия от обычного режима»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: