jQuery Dropdown Check List
The Dropdown Check List jQuery widget transforms a regular select html element into a dropdown checkbox list.
Copyright © Adrian Tosca <adrian.tosca@gmail.com>
Licensed like jQuery, see http://docs.jquery.com/Licensing.
Download
Download current version 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.
Example
The existing select element with id 's1' is replaced by a dropdown checkbox list widget.
The widget will set 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 in any way.
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.
$("#s1").dropdownchecklist();
Some option items from original select initially selected
The existing select element with id 's2' already has some options selected. In this case the widget will take over the selection automatically on initialization.
$("#s2").dropdownchecklist();
Long text, shorter control
An option allow to set a fixed width on the control even if the dropdown list is wider. The dropdown will keep its size so the items in the list are correctly visible.
$("#s3").dropdownchecklist({ width: 100 });
Long list of options, with scroll
Another option allow to set a fixed height of the dropdown list. This is usefull when there is a big number of items. The dropdown list is scrollable to allow selection of all the items.
$("#s4").dropdownchecklist({ maxDropHeight: 100 });
Option to let the first item in list check all items
The firstItemChecksAll option allow to set attach a special behavior to the first item in the list. If the item is checked, all items in the list are checked.
$("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });
Select with groups
The existing select element with id 's6' has groups (optgroup elements). The options are indented in groups as with original select element.
$("#s6").dropdownchecklist();
Style
.ui-dropdownchecklist
allows to modify the style of the control.ui-dropdownchecklist-hover
allows to add additional style when the mouse is over the control.ui-dropdownchecklist-active
allows to add aditional style to the control when the items in the drop container are collapsed.ui-dropdownchecklist-text
allows to modify the style of the text that is shown in the control.ui-dropdownchecklist-dropcontainer
allows to modify the style of the drop container.ui-dropdownchecklist-item
allows to modify the style of each dropdown item.ui-dropdownchecklist-item-hover
allows to add additional style to the dropdown items when the mouse is over them.ui-dropdownchecklist-group
allows to modify the style of group items.ui-dropdownchecklist-indent
allows to modify the style of indented items when they are in a group
For more details see the example style sheet.