Как создать привлекательный Multiselect в jQuery?

В этой статье мы создадим привлекательный множественный выбор в jQuery. Это меню выбора, в котором мы можем выбрать несколько значений одновременно. Например, выбирая разные колледжи.

Шаг 1: Прежде всего создайте файл HTML и добавьте следующие ссылки CDN в тег заголовка.

Ссылка CDN для jQuery:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js” ></script>

Ссылки CDN для выбранного плагина:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js”></script>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css”  crossorigin=”anonymous” referrerpolicy=”no-referrer” /

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

Синтаксис:

$("<selector>").chosen()

Пример 1: В примере мы видим множественный выбор в действии. Например, мы можем выбрать несколько значений, и они будут добавлены в список, и мы можем удалить элементы, просто щелкнув значок крестика на выбранных элементах.

Выход:

Пример 2: В этом примере мы собираемся добавить еще несколько функций в нашу опцию множественного выбора , мы добавим группы, чтобы мы могли выбирать из нескольких групп, а также выбирать несколько элементов, этот плагин также дает нам некоторые дополнительные опции для добавления в нашем множественном выборе. Мы можем выбрать много элементов, но в этом случае мы можем выбрать только четыре элемента, установив параметр max_selected_options . Другой вариант будет держать раскрывающееся меню открытым, пока мы не выберем элементы, установив параметр hide_results_on_select .

Выход: