Dropdown Menu with Multiple Select and Searching Support | JS Select

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-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 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 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 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 label="Islands">
      <option value="SAR" data-img="./img/sar.png">Sardinia</option>
      <option value="SIC" data-img="./img/sic.png">Sicily</option>

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

See Demo And Download

Official Website(luverolla): Click Here

This superior jQuery/javascript plugin is developed by luverolla. For extra advanced usage, please go to the official website.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…


Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…