select2

Наблюдается явление обрезания значений (в том числе и того, что ображается), если выбрать из списка тот же пункт, что соответствует обрезанному значению то оно так и останется обрезанным -- аналогично если выбрать другой, а потом не отправляя форму вернуть к тому. что соответствует обрезанному.

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

Каким образом происходит "обрезание" первый раз сказать непросто (мне) -- ситуацию воспроизвести не так просто.

Можно добавить на span значение вроде:

style="border-color:red; border-style:solid"

Другие варианты:
Выделение контейнера (ище):https://stackoverflow.com/questions/4198...

Ситуация

Происходит копирование html-кода select-а, к которому привязан select2.

По теме

Сразу отметим, что селект2 по сути добавляет дополнительный span, который и является видимым представлением селектбокса, сам же селектбокс скрывается.
Если просто после клонирование выполнить повторную привязку, то мы получим два спана.

Также в случае если вы производите клонирование с data-атрибутами, то вызов .select2('destroy') приведёт к затрагиванию оригинала (который клонируется).

Обработка событий

select2 предоставляет список событий, которые можно обрабатывать.

События изменения значения

Можно просто обрабатывать событие изменения конкретного селектбокса:

$('#yourselect').on("change", function(e) { 
   // ваш код
});

Или в точности событие от самого select2:

Используйте что-то вроде:

$query="SELECT * FROM `" . $TableName . "` "
	. " WHERE LOWER(`имяполятаблицы`) LIKE '%" . strtolower($codeFragment)."%' ";

-- основано на SQL LIKE

Приведём конкретный пример работы с select2.

Для select2 версии 4+ работает такое:

$("вашселектор").select2({ 
       language: 'ru',
       width: '100%',
});

не забудьте предварительно подключить файл перевода:

<script type="text/javascript" src="/libs/select2-4.0.2/select2.full.min.js"></script>
<script type="text/javascript" src="/libs/select2-4.0.2/ru.js"></script>

Скачиваем и подключаем на странице

Предположим, что вы скачали плагин [1]
далее его скрипт и стили можно подлючить на странице после Jquery как-то так:

Если вы нажимаете контрл, то событие клика начинает проходить "дальше" и получается, что это может скрывать элемент на странице, который скрывается, скажем при клике по body -- чтобы избежать этого можно завести специальную переменную, которая бы запрещала скрывать элемент, в случае если прижат ctrl (сделать это можно так) и проверять её значение в скрывающей функции.

Не получается найти колбэк, и такое вот не работает:

 $('select[id^="med"]').select2(); // все элементы, id которых начинается с med
    $('div[class*="field-med"]') // все элементы в класс которых входит подстрока field-med
              .not(pattern) // исключая такие(/такой)
              .hide();

Видимо, придётся использовать таймер (таймаут) и скрывать так:

Ниже приведён пример для обработки зависимых g