Dropdown Menu with Multiple Select and Searching Support

JS Select is a dropdown menu for Pure JavaScript (VanillaJS), with support for multiple selections and searches. A JavaScript library that converts a regular checkbox into a custom dropdown menu, with support for live search, options images, multiple selections, and more.

pure javascript multi select dropdown, filter select options in javascript, vanilla js multi select dropdown, select2 vanilla js, select dropdown js

How to make use of it:

1. Add the js-select’s JavaScript and Stylesheet to the web page.

<link rel="stylesheet" href="./css/select.min.css" />
<script src="./select.min.js"></script>

2. Add the next information attributes to your choose factor and completed it.

<select name="example" 
        data-multiple="true" 
        data-replace="jselect" 
        data-locale="en" 
        data-search="true" 
        data-placeholder="Choose your region">
  <optgroup label="North West">
      <option value="VDA" data-img="./img/vda.png">Aosta Valley / Vallée d'Aoste</option>
      <option value="LIG" data-img="./img/lig.png">Liguria</option>
      <option value="LOM" data-img="./img/lom.png">Lombardy</option>
      <option value="PIE" data-img="./img/pie.png" data-desc="More Desc">Piedmont</option>
  </optgroup>
  <optgroup label="North East">
      <option value="BOL" data-img="./img/bol.png">A.P. Bolzano / Bozen</option>
      <option value="TRE" data-img="./img/tre.png">A.P. Trento</option>
      <option value="EMR" data-img="./img/emr.png">Emilia-Romagna</option>
      <option value="FVG" data-img="./img/fvg.png">Friuli-Venezia Giulia</option>
      <option value="VEN" data-img="./img/ven.png">Veneto</option>
  </optgroup>
  <optgroup label="Centre">
      <option value="LAZ" data-img="./img/laz.png">Latium</option>
      <option value="MAR" data-img="./img/mar.png">Marche</option>
      <option value="TOS" data-img="./img/tos.png">Tuscany</option>
      <option value="UMB" data-img="./img/umb.png">Umbria</option>
  </optgroup>
  <optgroup label="South">
      <option value="ABR" data-img="./img/abr.png">Abruzzo</option>
      <option value="PUG" data-img="./img/pug.png">Apulia</option>
      <option value="BAS" data-img="./img/bas.png">Basilicata</option>
      <option value="CAL" data-img="./img/cal.png">Calabria</option>
      <option value="CAM" data-img="./img/cam.png">Campania</option>
      <option value="MOL" data-img="./img/mol.png">Molise</option>
  </optgroup>
  <optgroup label="Islands">
      <option value="SAR" data-img="./img/sar.png">Sardinia</option>
      <option value="SIC" data-img="./img/sic.png">Sicily</option>
  </optgroup>
</select>

Advanced Dropdown Select, JS Select Plugin/Github, custom select js, selectize, multiple select in javascript