Easy Customization Of HTML Select Boxes – nice-select2

Category: Form , Javascript | February 4, 2025
Author:bluzky
Views Total:0 views
Official Page:Go to website
Last Update:February 4, 2025
License:MIT

Preview:

Easy Customization Of HTML Select Boxes – nice-select2

Description:

A pretty nice select box replacement library that converts the regular select element into an animated, customizable, searchable dropdown list.

How to use it:

1. Import the nice-select2 plugin’s JavaScript and Stylesheet into the document.

<link href="dist/css/nice-select2.css" rel="stylesheet" />
<script src="dist/js/nice-select2.js"></script>
// OR 
# NPM
$ npm i nice-select2
import NiceSelect from "nice-select2";
@import "~nice-select2/dist/css/nice-select2.css"

2. Just attach the function NiceSelect to the existing select element and done.

<select id="example">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
NiceSelect.bind(document.getElementById("example"));

3. Enable/disable the searchable functionality. Default: false (disable).

NiceSelect.bind(document.getElementById("example"),{
  searchable: true
});

4. API methods.

instance.update();
instance.focus();
instance.enable();
instance.disable();
instance.clear();
instance.destroy();

Changelog:

v2.3.1 (02/04/2025)

  • [FIX] Method .clear needs to deselect options.

v2.1.0 (01/26/2023)

  • [FIX] Method .clear needs to deselect options.
  • Added option to show selected items
  • Fixed a bug in which the selection was not made even if it was selected again.
  • fixed: issue when first option was always selected

v2.0.0 (01/14/2023)

  • This release makes it possible to include nice-select2 in your webpack import
  • added: invalid and valid class
  • bugfixes

12/22/2021

  • update

10/12/2021

  • update

10/10/2021

  • clean dependency

09/25/2021

  • JS updated

You Might Be Interested In:


Leave a Reply