jquery plugin for multiple select

 // Скрипт $(function() { $('[role="select"]').each(function() { var e = this; // Обромляем содержимое в блок и добавляем ещё одно поле для добавления тегов $(e).html('<div role="field"></div><div role="list">' + $(e).html() + '</div>'); var field = $(this).find('[role="field"]'), // Получаем блок с где будут сохраняться теги list = $(this).find('[role="list"]'); // Получаем блок с option $(e).val(''); // Создаём для элемента [role="select"] значение value // Проверяем, есть ли выбранные option if (list.find('option[selected]').length > 0) { // Если да, то создаём для каждого option функцию list.find('option[selected]').each(function() { var val = $(this).attr('value') || $(this).text(); // Получаем значение option из атрибута value или, если его нет, из содержимого // Проверяем, пустое ли поле с тегами if ($(e).val() == '') { $(e).val(val); // Если пустое, то просто добавляем значение val } else { $(e).val($(e).val() + ',' + val); // Если не пустое, то к содержимому добавляем запятую и значение option. Делаем что-то типа массива }; var tag = $('<span role="tag">' + $(this).text() + ' <span role="remove">x</span></span>'); // Создаём тег tag.prop('index', $(this).index()).val(val); // Записываем в него индекс соответствующего option и field.append(tag); // Добавляем тег в конец поля $(this).hide(); // Скрываем элемент option }); }; // Создаём функцию нажатия на option $(e).on('click', 'option', function() { var val = $(this).attr('value') || $(this).text(), // Получаем значение value элемента option и если его нет, то его содержимое valArr = $(e).val().split(','); // Создаём из значения value элемента [role="select"] массив, что бы проверить на наличие элемента // Проверяем, добавлено ли уже это значение в value элемента [role="select"], что бы пользователь не мог добавить копию значения if(valArr.indexOf(val) == -1){ // Если значения в value элемента [role="select"] нет, то проверяем value на содержимое. Пустое ли оно if ($(e).val() == '') { // Если да, то просто добавляем val в value $(e).val(val); } else { // Если value не пустое, то к содержимому добавляем запятую и значение val. Создаём что-то вроде строчного массива $(e).val($(e).val() + ',' + val); }; var tag = $('<span role="tag">' + $(this).text() + ' <span role="remove">x</span></span>'); // Создаём тег tag.prop('index', $(this).index()).val(val); // Записываем в тег индекс элемента option, на который нажали и его val field.append(tag); // Добавляем тег в конец поля $(this).hide(); // Прячем option list.hide(); // Скрываем список с option, для эффекта :) }; // Создаём функцию нажатия на поле с тегами }).on('click', '[role="field"]', function() { list.toggle(); // Открываем или закрываем список с option при нажатии на поле с тегами // Создаём функцию удаления тега из списка при нажатии на [role="remove"] }).on('click', '[role="remove"]', function() { var optInx = $(this).parent('[role="tag"]').prop('index'), // Получаем из тега индекс соответствующего option val = $(this).parent('[role="tag"]').val(); // Получаем из тега value соответствующего option $(this).parent('[role="tag"]').remove(); // Удаляем тег list.find('option').eq(optInx).show(); // Ищем нужный option по индексу и показываем его var valArr = $(e).val().split(','); // Создаём из значений value элемента [role="select"] массив для удаления значения valArr.splice(valArr.indexOf(val),1); // С помощью функции indexOf ищем положение нужно value в массиве и удаляем его $(e).val(valArr.join(',')); // Создаём из массива строку и переписываем значение value в [role="select"] }); }); // Создаём функцию нажатия на любой элемент сайта $(document).click(function(e) { // Проверяем, нажатие было на элемент [role="field"] или нет if($(e.target).closest('[role="field"]').length == 0){ // Если нет, то скрываем список option $('[role="list"]').hide(); }; // Проверять нужно потому, что у нас уже есть событие нажатия на [role="field"] и что бы не возникло "противоречий" }); }); // Проверка значение $(function() { $('button').click(function() { console.log($('[role="select"]').val()); }); }); 

 [role="select"] { display: inline-block; position: relative; } [role="select"] > [role="field"] { display: block; -webkit-appearance: menulist; box-sizing: border-box; align-items: center; white-space: pre; width: 300px; min-height: 27px; padding: 1px; -webkit-rtl-ordering: logical; color: black; background-color: white; cursor: default; border-width: 1px; border-style: solid; border-image: initial; border-radius: 0px; border-color: rgb(169, 169, 169); font-size: 13px; font-family: arial; } [role="select"] > [role="field"] > [role="tag"] { display: inline-block; background-color: #dddddd; padding: 3px; margin: 1px; border-radius: 3px; } [role="select"] > [role="field"] > [role="tag"] > [role="remove"] { display: inline-flex; margin-left: 3px; border-radius: 50%; background-color: #cfcfcf; width: 15px; height: 15px; cursor: pointer; justify-content: center; align-items: center; } [role="select"] > [role="list"] { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: -1px 0 0 0; border: 1px solid #a9a9a9; background-color: white; font-size: 13px; font-family: arial; } [role="select"] > [role="list"] > option { display: block; color: black; cursor: pointer; } [role="select"] > [role="list"] > option:hover { background-color: #1b8bfa; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="select" name="myselect"> <option value="Значение 1" selected>Пункт 1</option> <option value="Значение 2">Пункт 2</option> <option value="Значение 3">Пункт 3</option> </div> <button>Показать значение select</button>