13 jQuery SelectBox/Drop-down Plugins

...

14 javascript8 code5 blog5 snippet4 github4 tutorial4 nlp2 api2 web development2 web2 php2 jquery2 css2 natural language generation2 uvloop1 butterflynet1 morepath1 encryption1 ssl1 technology1 google maps1 markers1 eve1 app1 twig1 nodeJS1 sailsJS1 venngage1 freebbble1 top1 artificial intelligence1 process1 google wallet1 wireframing1 speed1 cdn1 sanic1 queries1 handlebars1 helpers1 js1 zoho1 ticket tracking1 issue tracking1 less1 mixins1 site1 philleepedit.1 year1 new1 view1 bug tracking1 bugs1 grid1 search engine optimization1 range selectors1 lucidpress1 plugins1 mod1 graphic design1 copywriting1 tutorials1 sql1 nodejs1 tools1 social media marketing1 https1 lucidchart1 vuejs1 angularjs1 reactjs1 fullscreen1 chrome1 android1 polymerjs1 aurelia.io1 macos tips1 npm1 law1 AI1 wikihow1 nonchalant1 safari1 youtube1 socket.io1 meteor1 express.js1 node.js1 app development1 progressive web apps1 keystone1 koa.js1 broccoli1 webpack1 babel1 electrode.js1 pm21 node1 nginx1 form1 design1 smashing magazine1 user experience1 database1 d3.js1 html design1 underscore1 google slides1 pexels1 pitcherific1 es51 lodash1 ecmascript1 json1 mysql1 learning1 intelligent1 html1 open source1 Apache1 education1 intelligence1 IQ1 web31 web intelligence1 happiness1 money1 smarts1 awesome screenshot1

alistapart.com

Progressive Web Apps: The Case for PWAs

Using CSS Mod Queries with Range Selectors

David Power

Why desktop apps are coming back – Hiri

techcrunch.com

Google’s Flutter toolkit goes beyond mobile with Project Hummingbird

Eric Elliott

Native Apps are Doomed!

workingmouse.com.au

Progressive Web Apps Are the Next Big Thing

thedrum.com

The web design trends brands need to prepare for in 2019

creativebloq.com

5 ways to speed up your websites and apps

stackify.com

Top 10 Node.js Developer Tools

webdesignerdepot.com

CSS Border-Radius Can Do That?

Liam Tung

Google Chrome Labs: Use our open-source Squoosh image tool for faster page loads | ZDNet

idownloadblog.com

How to transfer playlists between popular music services with TuneMyMusic

developers.google.com

Making Fullscreen Experiences

ultimategdprquiz.com

The Ultimate GDPR Quiz

tecmint.com

How to Auto Execute Commands/Scripts During Reboot or Startup

flipboard.com

5 of the best JavaScript frameworks

Web 2.0 on Flipboard

wikihow.com

How to Be Nonchalant

Shannon Liao

‘World’s first robot lawyer’ now available in all 50 states

martechtoday.com

Natural language processing 101

machinelearningmastery.com

What Is Natural Language Processing? - Machine Learning Mastery

imore.com

How to add spaces to your Mac's Dock using Terminal

johnpapa.net

Node and npm without sudo

Node.js Foundation

Modernizing Node.js with idiomatic JavaScript – Node.js Collection – Medium

sergeyzhuk.me

Asynchronous PHP: Why?

qz.com

200 universities just launched 600 free online courses.

thoughtco.com

Free Online HTML Classes - Find the Best Free Online HTML Classes for Programmers

Travis Bradberry

Science Says These Five Things Prove You're Smart

dmarge.com

Study Reveals That Material Goods Don't Bring Happiness

Noman Ur Rehman

Working with JSON in MySQL

Ian Johnson

The Hitchhiker’s Guide to d3.js

smashingmagazine.com

Better Form Design: One Thing Per Page!

Sailing With Sails.js: An MVC-style Framework For Node.js – Smashing Magazine

What Everyone Should Know About The Process Behind App Design...

bestdesign2themes.com

Why Laravel Development Is Popular Php Frameworks

reindex.io

You Might Not Need Underscore

Laurence Bradford

8 Tech Tools To Communicate Your Ideas More Effectively

readwrite.com

5 predictions for artificial intelligence for for the coming year

Jose Aguinaga

How it feels to learn JavaScript in 2016

css-tricks.com

Adding and Leveraging a CDN on Your Website

lifehack.org

5 Secret Hacks for More Powerful Web Designs

androidauthority.com

Google Wallet's new web app is here!

Serdar Yegulalp

5 wicked-fast Python frameworks you have to try

hbr.org

Machine Learning Is No Longer Just for Experts

humaan.com

Custom HTML Markers with Google Maps - Websites, Mobile and eCommerce – Humaan

major.io

Automated Let's Encrypt DNS challenges with Rackspace Cloud DNS!

sitepoint.com

13 jQuery SelectBox/Drop-down Plugins

R.L. Adams

Five Core Skills To Learn Online Today

brainhub.eu

15 Best Node.js Tools for Developers

ihatetomatoes.net

The Guide to HTML5 Canvas JavaScript Libraries

Philleep Florence

Get the next record in a SQL table!

Getting More with LESS! - Mixins!

Code Snippets - Get DOM Element Content

A New Year, A New Site

PhilleepEdit Webmaster

Philleep Florence Bug Tracker and Project Management has moved!

Code Snippets - HandleBars.js Helpers - ONE

2018-12-15 : 04:19


The default styling for select elements isn’t for everyone. Sometimes you might want to control how it looks (to keep it consistent across browsers and devices) or you might want additional functionality that just isn’t supported natively.

Thankfully there’s a heap of great jQuery powered plugins out there to simplify the process.

We’re going to run through a selection of plugins you can incorporate into your next project. Some of these plugins are highly configurable with options, methods, and events, while others are simple replacements for select elements for styling and ease of use.

Chosen

Chosen is an extensive plugin that not only restyles your select elements but provides additional functionality such as in-select searching, multiple element selection, and highlighting.

The options documentation outlines all the settings, methods, and events that you can interact with to customize your elements. The plugin itself is maintained by the developers who worked on the Harvest project management tool. Their GitHub repository is continually being updated, with additional features, bug fixes, and optimizations being rolled into the plugin.

Website / GitHub

Select2

Select2 is a fully-featured, rich select replacement / enhancement plugin. It not only restyles your select elements but also extends them with additional functionality.

The plugin is significantly more developer focused, with their options page showing comprehensive examples of how you’d use each of the different features.

This plugin provides a high level of customization and is a great go-to solution if you’re looking for a plugin that can be customized to match your project.

Website / Demos / Github

jQuery Nice Select

This plugin is a lightweight select replacement library. jQuery Nice Select replaces the default native select elements with restyled dropdown menus.

There isn’t much to this plugin as it’s meant to be used as a quick way to restyle select elements, providing something visually appealing without much effort. The plugin is actively being developed and improved on their GitHub repo and works really well across both mobile and desktop browsers.

If you’re looking for something quick and easy that only restyles your select elements and doesn’t require a lot of effort, then this is the plugin for you.

Website & Demos / Github

Selectize

Selectize is an extremely developer focused, all inclusive plugin that not only provides you with a better looking select list, but also adds new useful features such as tagging, remote data binding and dynamic dropdowns.

This plugin is a great overall choice and should be one of your “go-to” options if you’re looking at re-styling and extending the functionality of your select elements.

Website & Demos / GitHub

Image Combo Box

Image Combo Box is a simple plugin that lets you define an image and description for each option inside your select controls. It’s primarily used to showcase a related image for each option so it’s useful when you want to display a visual representation for each choice.

If your main goal is to make it so you can display images and/or descriptions with your dropdown elements then this plugin is worth a look.

Website / Demo / Github

jQuery Searchable DropDown Plugin

The Searchable DropDown plugin is one of the older plugins you might find online. Created back in 2012 (and not recently updated). Its purpose is to transform your basic select elements into a searchable single listing.

If you’re looking for a bare minimum replacement that enables sorting this might be the one for you

Website / Demo

Multi-select Combo Box

This plugin is a little different than others we’ve covered. It works on two or more select elements at a time, creating a UI where you can move elements back and forth between the lists. It’s similar to other drag and drop solutions, but made entirely with just standard select elements. To get this up and running you’ll probably need to style it a bit to match modern design standards (as it’s a bit ugly)

This type of control is pretty useful if you want to sort a listing of items between two or more containers, for example sorting tasks or organizing content.

The Demo and GitHub pages outline how you can set this up and since there are few options to control their learning curve is fairly shallow.

Website / Demo / GitHub

jQuery Selectbox

jQuery Selectbox is one of the older select replacement plugins. However, unlike other plugins that add heaps of functionality, this plugin aims mainly to restyle your controls and leave the functionality fairly untouched.

This plugin’s strength lies in its simplistic styling, making it easy for you to override with your own styling to match your design. If you’re looking to do something basic such as styling your dropdowns and potentially customizing a few settings then this plugin might be just what you’re after.

Website & Demo / GitHub

Multiselect.js

Another jQuery powered library that lets you create multi-select based lists quickly and easily. It’s easy to see how useful they are when showcased in their demos. You can create a single select element and then easily move items back and forth between your lists.

The plugin appears to be updated fairly frequently by its developer and the GitHub page has heaps of closed / resolved tickets.

This is a good starting point if you’re after a simple multi-select plugin.

Website / GitHub

JQuery SumoSelect

SumoSelect has all the functionality you need in a select list replacement. This plugin handles both single and multi-select elements, along with searching and filtering, backed by a solid set of options and events.

Another noteworthy element is that this plugin provides comprehensive browser support. SumoSelect will work as far back as IE8 on a desktop and provide support for mobiles, either working normally or falling back to native controls (depending on the options you supply when setting it up).

Website / Demos / GitHub

jQuery UI Selectmenu

Here’s something a little different. Unlike other independent plugins, such as Chosen or Select2 (which, while popular, aren’t exactly widespread), this plugin is a part of the jQuery UI framework as an extensible widget called select menu

This library would be useful in situations where you want to quickly style your select elements to match jQuery UI’s theming or you want a comprehensive library you can customize and adapt yourself.

Website & Demo

jQuery Filterable Bootstrap Select

Filterable Bootstrap Select is a plugin that extends the default select styling provided in Bootstrap 3.

The main plugin itself lives on GitHub and it’s been updated occasionally over the space of a year. However with most projects maintained by a single person you never know when or if you will be able to get support. If you’re happy with how the demos work and want to use it “as-is” then it’s a great resource if you’re already working on Bootstrap powered site.

Demo / GitHub

DDSlick jQuery DropDown

DDSlick transforms your select elements into lightly styled dropdown menus. Each option contains its normal title and value, but also an optional image and description.

If you want to see how this works you can literally copy and paste the websites HTML and corresponding JS samples into a JS playground website like Codepen.io and it will all work (assuming you link to both jQuery and the plugin’s main JS file).

Website


sitepoint.com
Philleep Florence LLC

This unknown unknown does not support some features required to view Philleep Florence LLC. Please download a newer unknown Browser.

 
 
Philleep Florence LLC
 
Philleep Florence LLC
Image Preview