Как создать поле выбора с множественным выбором

Наличие раскрывающихся списков на нашей веб-странице улучшает общее качество и дизайн экрана.

Таким образом, раскрывающийся список работает как альтернатива, а в определенных случаях - лучший вариант по сравнению с переключателями и флажками. Чего ждать? Мы говорили об альтернативе переключателям и флажкам? Но ведь это должен был быть просто переключатель, не так ли?

Радиокнопка не допускает более одного выбора, а флажок, с другой стороны, позволяет выбрать один или несколько вариантов. Пользователь может выбрать только один вариант из раскрывающегося списка, и поэтому он по своим функциям похож только на радиокнопку, а не на флажки, верно? Что ж, здесь в игру вступает концепция множественного выбора в поле выбора.

Как я могу позволить пользователям выбирать несколько вариантов из окна выбора?

С точки зрения веб-дизайнера, позволить пользователю выбирать несколько вариантов из окна выбора довольно просто и понятно. Нам просто нужно добавить атрибут «multiple» к элементу <select>. Теперь, чтобы выбрать несколько вариантов, нам нужно добавить атрибут size также к элементу select. Это сделает поле выбора похожим на поле, а не только на раскрывающийся список.

Пользователь должен удерживать клавишу Ctrl (в Windows) и клавишу Command (на Mac), чтобы выбрать варианты.

select name="Country" multiple size="5">
  <option value="USA">USA</option>
  <option value="Russia">Russia</option>
  <option value="India">India</option>
  <option value="Britain">Britain</option>
</select

Обратите внимание на эти моменты

• Атрибут «multiple» - это логический атрибут, который, если он присутствует, означает, что можно выбрать несколько вариантов.
• Однако с точки зрения веб-дизайнера HTML-код для одиночного выбора и множественного выбора из раскрывающегося списка немного отличается; с точки зрения конечного пользователя эта разница не видна на веб-странице. Поле выбора ни в коем случае не изменит своего макета или стиля. Следовательно, пользователю необходимо указать, как выбрать несколько вариантов из окна.
• Учитывая вышеупомянутый момент, лучше устанавливать флажки вместо нескольких вариантов, если количество вариантов меньше.
• Способ выбора нескольких параметров из раскрывающегося списка отличается от одной операционной системы к другой. В то время как кнопка управления (Ctrl) используется для выбора в Windows, кнопка command делает свое дело в системах Mac.

Улучшение раскрывающегося списка

Как видите, поле выбора в собственном HTML весьма ограничено, особенно для выбора нескольких параметров. Здесь в бой вступают JavaScript и высокоэффективные библиотеки. Компонент select2 jQuery дает дизайнеру возможность настраивать общий макет поля выбора, а также включать такие полезные функции, как поиск, динамическая загрузка, теги и другие.

Select2 поддерживает множественный выбор?

Select2 поддерживает множественный выбор в раскрывающемся списке. Чтобы включить множественный выбор, просто включите «multiple» в качестве атрибута.

Преимущество здесь в том, что пользователю не нужно нажимать Ctrl или Command для выбора нескольких параметров.

<script>
$(function()
{
  $(".js-example-basic-multiple").select2();
});
</script>
<select class="js-example-basic-multiple" multiple="multiple">
  <option value="US">United States</option>
  <option value="IND">India</option>
  <option value="GBR">Great Britain</option>
</select>

Select2 также добавляет другие улучшения. Например, чтобы ограничить количество вариантов, которые может сделать пользователь, просто добавьте maximumSelectionLength в параметры Select2 следующим образом:

$(".js-example-basic-multiple-limit").select2(
{
  maximumSelectionLength: 2
});