Article Diary - General Knowledge Digest

jQuery Dropdown Check List

Dropdown Check List is a JavaScript Plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list. The Dropdown Check List jQuery widget transforms a regular into a dropdown checkbox list.

Usage

Dropdown Check List plugin dynamically builds a container with checkboxes and labels to replace the select element. You can customize the look and feel of your dropdown check list by simply updating CSS file.
$("#select_id").dropdownchecklist();
The existing select element with id=’select_id’ is replaced by a dropdown checkbox list widget. See the Demo Page for a detailed description and live examples.

Dropdown Checkbox List

How does it work?

Dropdown Check List uses the existing structure of the html select elements on which it is applied to dynamically build a container with checkboxes and labels then hides the original select element. The plugin does not change in any way the existing select element, only syncronize the checked values from the new container to the original select. This approach has the added benefit to allow the use of the plugin with any server technology.

Features
  • Supports items selected by default
  • Set a fixed width on the control even if the dropdown list is wider
  • Set a fixed height of the dropdown list with scrolling
  • Option to let the first item in list check all items
  • Select with groups
  • Single select with radio buttons instead of check-boxes
Download

The current version of drop-down check list can be downloaded from google code downloads. This page, including all required files to run the examples, can be downloaded as zip package from the same location. Dropdown check list requires jquery.js and ui.core.js and has been tested with jquery version 1.2.6. The widget has been tested with IE 7, Firefox 3, Opera 9.6, Safari 3.1 (for windows) and Chrome 0.3 browsers.

Requirements: jQuery

Dropdown Check List Website

Online Demo

4 (2)
Article Rating (2 Votes)
Rate this article
Attached Files
There are no attachments for this article.
Comments
There are no comments for this article. Be the first to post a comment.
Name
Email
Security Code Security Code
Related Articles RSS Feed
Easy Slider jQuery Plugin - Easy Image or Content Slider
Viewed 1747 times since Tue, Jan 12, 2010
Quick Tables for Showing & Updating DB Data
Viewed 1317 times since Sun, Dec 27, 2009
Open Source WYSIWYG Editor
Viewed 1491 times since Thu, Jan 7, 2010
How to prevent access to a specific file on server using htaccess?
Viewed 1260 times since Sun, Mar 14, 2010
Stylish Cross-Browser CSS Buttons - Simply-Buttons v2
Viewed 1201 times since Thu, Nov 12, 2009
Featured Items Widget with jQuery
Viewed 1513 times since Sun, Dec 27, 2009
Geo-location Mapping With Google Maps API & PHP
Viewed 1618 times since Mon, Apr 4, 2011
mbSlider - Highly Customizable Content Slider
Viewed 1177 times since Mon, Jul 26, 2010
Embeddable Google Document Viewer For Websites
Viewed 1168 times since Fri, Mar 11, 2011
What is new in HTML 5?
Viewed 1241 times since Sat, Apr 3, 2010