Tiny Tags Input Style Multi Select Plugin - jQuery multiselect.js

A tiny jQuery multiple select plugin that displays and stores the selected options as tags/tokens in an input field.

See Also:

• Best Multiple Select Plugins
• Best Tags Input Plugins

How to use it:

1. Link to jQuery library and the multiselect.js plugin's files.

<link rel="stylesheet" href="jquery.multiselect.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="jquery.multiselect.js"></script>

2. Create an input field together with the select element into a multi-select container.

<div id="multi-select">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>
  <input type="text" name="selected_values" disabled="disabled" placeholder="Selected Values"/>
</div>

3. Call the main function multiSelect on the top container and done.

$(function(){
  $("#multi-select").multiSelect();
});

4. Customize the placeholder of the select element.

$(function(){
  $("#multi-select").multiSelect({
    label: 'Select Something'
  });
});

5. Override the default styles as per your needs.

.multiselect-wrap {
  width: 100%;
  min-height: 35px;
  display: block;
  max-width: 300px;
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
}

.multiselect-selected {
  display: block;
  height: 100%;
  min-height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.multiselect-list {
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0px;
  background: #eee;
  border: 1px solid #ccc;
  box-sizing: border-box;
  width: 100%;
}

.multiselect-list div {
  padding: 7px 5px;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
}

.multiselect-list div:hover,
.multiselect-list div.selected-option {
  background: #ccc;
}

.multiselect-selected span {
  padding: 5px;
  background: #eee;
  margin: 2px 4px;
  display: inline-block;
  font-size: 12px;
}

---

This awesome jQuery plugin is developed by TheScriptKiddie-Yout. For more Advanced Usages, please check the demo page or visit the official website.