jQuery Multiple Select Component Plugin | easySelect

easy select is a very small jQuery multi-select plugin that allows the user to select one or several options from a drop-down list in a convenient way.

Features:

  • Works with the original <select> element.
  • Auto-append checkboxes to options.
  • Select all and clear all controls.
  • A search field appears to filter through the options.
  • Allows you to specify the maximum number of options allowed to be selected.

Must Read – Simple Multi-select Component With Items Displayed In A Table | vue-gridmultiselect

How to make use of it:

1. Insert the stylesheet easySelectStyle.css and JavaScript easySelect.js into the web page.

<link rel="stylesheet" href="easySelectStyle.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="easySelect.js"></script>

2. Just name the function easySelect on the goal <select> component and the plugin.

<select id="demo" multiple="multiple">
  <option value="Lightblue">Lightblue</option>
  <option value="Green">Green</option>
  <option value="Yellow">Yellow</option>
  <option value="Blue Samoa">Blue</option>
  <option value="Pink">Pink</option>
  <option value="Black">Black</option>
  <option value="Orange">Orange</option>
</select>
$("#demo").easySelect({
  // options here
})

3. Determine the utmost variety of choices allowed to select at a time.

<select id="demo" data-max="5" multiple="multiple">
  <option value="Lightblue">Lightblue</option>
  <option value="Green">Green</option>
  <option value="Yellow">Yellow</option>
  <option value="Blue Samoa">Blue</option>
  <option value="Pink">Pink</option>
  <option value="Black">Black</option>
  <option value="Orange">Orange</option>
</select>

4. Determine whether to indicate Select All & Clear All controls on the highest of the multi-choose element.

$("#demo").easySelect({
  buttons: true
})

5. Determine whether to indicate a search area on the top of the multi-choose element.

$("#demo").easySelect({
  search: true
})

6. Customize the looks of the multi-choose element.

$("#demo").easySelect({

  // placeholder text
  placeholder: 'Select item',

  // color of selected options
  selectColor: '#414c52',

  // color of placeholder text
  placeholderColor: '#838383',

  // title of selected options
  itemTitle: 'Selected items',

  // shows values
  showEachItem: false,

  // width
  width: '100%',

  // max height
  dropdownMaxHeight: 'auto'
  
})

Read More – 

Multi-level Dropdown Select Vue Component | Cascader Select
A Component For Vue.js To Select Double-sided Data



See Demo And Download

Official Website(Vs-tev): Click Here

This superior jQuery/javascript plugin is developed by Vs-tev. For extra Advanced Usage, please go to the official website.

Share