Multiple selection (checkbox) dropdwon client side

Description

Dropdown Check List is a javascript plugin based on the jQuery library that transforms a regular select html element into a dropdown checkbox list.

How does it work?

Dropdown CheckList 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, it only synchronizes 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.
The widget will hide the existing select element by modifying its display attribute to none. The new widget will keep the replaced select options synchronized with the checkbox list so the postback is not affected. The text of the control is composed on the concatenated text of selected options in the list. Because the width of the control will not allways accomodate all selected options, the control will show the full text on hover by setting its title attribute.

Examples

Simple Multi-selector

Nothing originally selected

$("#s1").dropdownchecklist();

In head tag

In body tag

   
            Low
            Medium
            High
            Low
            Medium
            High
            Low
            Medium
            High
            Low
            Medium
            High
            Low
            Medium
            Low
            Medium
            Low
            Medium
            High
            Low
            Medium
            High
            High
            High
        

Reference link : Click here