Advanced Custom Dropdown Select With Vanilla JavaScript

Category: Form , Javascript | December 23, 2021
Views Total:2,543 views
Official Page:Go to website
Last Update:December 23, 2021


Advanced Custom Dropdown Select With Vanilla JavaScript


Just another custom select JavaScript library that turns native select boxes into fully styled, beautiful, searchable dropdowns.

How to use it:

1. Include the stylesheet select.min.css and JavaScript select.min.js on the page.

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

2. Add the following HTML data attributes to the <select> element and the library will take care of the rest.

  • data-multiple: Enable multiple select
  • data-replace: CSS prefix
  • data-locale: Language
  • data-search: Enable live search
  • data-placeholder: Custom placeholder text
  • data-img: Option image
  data-placeholder="Choose your region">
  <optgroup label="North West">
      <option value="VDA" data-img="">Aosta Valley / Vallée d'Aoste</option>
      <option value="LIG" data-img="">Liguria</option>
      <option value="LOM" data-img="">Lombardy</option>
      <option value="PIE" data-img="">Piedmont</option>
  <optgroup label="North East">
      <option value="BOL" data-img="">A.P. Bolzano / Bozen</option>
      <option value="TRE" data-img="">A.P. Trento</option>
      <option value="EMR" data-img="">Emilia-Romagna</option>
      <option value="FVG" data-img="">Friuli-Venezia Giulia</option>
      <option value="VEN" data-img="">Veneto</option>
  <optgroup label="Centre">
      <option value="LAZ" data-img="">Latium</option>
      <option value="MAR" data-img="">Marche</option>
      <option value="TOS" data-img="">Tuscany</option>
      <option value="UMB" data-img="">Umbria</option>
  <optgroup label="South">
      <option value="ABR" data-img="">Abruzzo</option>
      <option value="PUG" data-img="">Apulia</option>
      <option value="BAS" data-img="">Basilicata</option>
      <option value="CAL" data-img="">Calabria</option>
      <option value="CAM" data-img="">Campania</option>
      <option value="MOL" data-img="">Molise</option>
  <optgroup label="Islands">
      <option value="SAR" data-img="">Sardinia</option>
      <option value="SIC" data-img="">Sicily</option>

You Might Be Interested In:

Leave a Reply