jQuery select box examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Custom Select Box

Author:
rajeshdn | January 13, 2020
Made with:
HTML / CSS / JS

About a code

Custom select box with little jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Dropdown Menu Interaction

Author:
Aaron Iker | August 20, 2019
Made with:
HTML / CSS (SCSS) / JS

About a code

Dropdown menu interaction in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Select Menu Interaction

Author:
Aaron Iker | August 8, 2019
Made with:
HTML / CSS (SCSS) / JS

About a code

Animated select menu interaction in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Select Dropdown

Author:
Aaron Iker | October 22, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Created a live version of the select dropdown from the Gear CMS styleguide, dark & light version.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Fancy Multiple Select

Author:
Aaron Iker | September 6, 2018
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Select Fields

Author:
Heath | May 29, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

Just a little form to showcase how you can use DL, DT & DD to spice up your select boxes.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Responsive Custom Select Box

Author:
Dejan Babić | December 15, 2017
Made with:
HTML / CSS (SCSS) / JS

About a code

Responsive custom select box with custom scroll.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
chosen.css, jquery.mCustomScrollbar.css, jquery.js, jquery.nicescroll.js

Animated Selected Box

Author:
Luís Carvalho | October 26, 2017
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

jQuery Multi Select

Author:
mySociety | September 29, 2016
Made with:
HTML / CSS / JS

About a code

Converts <select multiple> elements into dropdown menus with checkboxes.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.multi-select.js

Select-Boxes

Author:
Nipun Paradkar | July 23, 2016
Made with:
HTML / CSS / JS

About a code

Animated select boxes in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css, jquery.js

Select Option Interaction

Author:
Bhakti Pasaribu | August 29, 2015
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

Built with TweenMax GSAP.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
tweenmax.js textplugin.js

Material Design Select Box

Author:
Valentin Mocanu | August 11, 2015
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, jquery.js, jquery.scrollTo.js
Select2

Select2

Author:
fk, jpic, kevin-brown | March 4, 2012
Made with:
22000 stars831 watchers

Selectize

Selectize

Author:
selectize | September 1, 2012
Made with:
10753 stars335 watchers

Bootstrap Select

Bootstrap Select

Author:
Silvio Moreto | September 26, 2012
Made with:
6971 stars338 watchers

Multiple Select

Multiple Select

Author:
文翼 | April 18, 2013
Made with:
1424 stars90 watchers

jQuery Select Box Plugin

jQuery Select Box Plugin

Author:
Greg Franko | March 23, 2012
Made with:
869 stars61 watchers

jQuery Selectric

jQuery Selectric

Author:
Leonardo Santos | April 20, 2012
Made with:
629 stars37 watchers

Custom Select Box CSS Style Plugin

Custom Select Box CSS Style Plugin

Author:
Adam Coulombe | March 26, 2012
Made with:
615 stars44 watchers

jQuery Nice Select

jQuery Nice Select

Author:
Hernán Sartorio | September 16, 2015
Made with:
569 stars28 watchers

Chained

Chained

Author:
Mika Tuupola | April 13, 2010
Made with:
560 stars42 watchers

jQuery SelectBox

jQuery SelectBox

Author:
Marc J. Schmidt | April 14, 2011
Made with:
558 stars26 watchers

Select-or-Die

Select-or-Die

Author:
Per | April 27, 2014
Made with:
551 stars21 watchers

Simple Drop Down Effects

Simple Drop Down Effects

Author:
Codrops | November 29, 2012
Made with:
443 stars42 watchers

jquery.sumoselect

jquery.sumoselect

Author:
Hemant Negi | April 9, 2014
Made with:
412 stars44 watchers

Minimalect

Minimalect

Author:
Oskari Groenroos | May 20, 2013
Made with:
372 stars19 watchers

Multiselect

Multiselect

Author:
Adrian Crisan | March 21, 2013
Made with:
208 stars21 watchers

jQuery MultiSelect

jQuery MultiSelect

Author:
nobleclem | October 16, 2014
Made with:
109 stars17 watchers

Selectator

Selectator

Author:
QODIO | December 13, 2013
Made with:
79 stars10 watchers

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨