Javascript

Chosen Javascript Plugin to Create User-Friendly Select Boxes

Written by Kevin Liew on 18 Jan 2012
17,993 Views • Shares
2 comments

Introduction

Chosen is a Javascript plugin that enhance the existing select boxes. So, why using Chosen Javascript plugin?

  • The Select boxes we have is inconsistent across different browsers
  • It's not user friendly in multiple select. (Press CTRL and select)
  • Not suitable for really long list. (eg, country, jobs)

Above reasons are pretty convincing aren't there? Chosen can solve all those problems by adding tag-based multiple select (the one we all used on facebook to select multiple friends), and a search field to tackle long list and last and not least, it can be themed and would appear identical across different browsers.

Features

  • Quick and easy to setup, it interprets default select box attributes and options
  • Add search field in drop down list
  • Tag based multiple select
  • optgroup support
  • Selected and disabled support
  • Allow deselect on single selects
  • Default text support
  • Change/Update events
  • Degrade gracefully/Progressive enhancement. Fallback to the default select box if javascript is not supported

Screenshots

SPECIFICATIONS & DOWNLOAD

  • Official Website / Demo / Download
  • Plugin Category: Form
  • Requirement: Available in jQuery, Prototype and MooTools Framework
  • Compatibility: All Modern Browsers
  • License: MIT License
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Matt Walker 5 years ago
This is awesome. I love the multiple select. We are currently working up some UX documentation at work and I will be referencing this as a possible solution to select boxes
Reply
Kevin Liew Admin 5 years ago
Hey Matt, glad you like it. I have just used it in my company project as well, it's easy to implement.
Reply