jQuery Dropdown Check List TESTCASES

The Dropdown CheckList jQuery widget transforms a regular <SELECT> html element into a combo box with a text display of the selected elements and a dropdown of options. The plugin is hosted on SourceForge.

Copyright © Adrian Tosca; Ittrium, LLC; W.C.Omohundro

Licensed like jQuery, see http://docs.jquery.com/Licensing.

TestCases

This page contains various test cases used to exercise DDCL.
Please Note that this page directly references the latest, non-minimized version checked into SVN, not the current release point contained in the download .zip. It is used to test pending changes and the samples here may not work on the stable release. Click on the version button below to see the active version.
Please Note that this page is using jQuery 1.11.2, ui 1.11.2. The jQuery ui library includes full widget support for testing components like Accordion and Dialog.
Please Note as of Version 1.2, all testing will be done with html pages defined for strict mode (DOCTYPE http://www.w3.org/TR/html4/strict.dtd). This is to better reflect modern standards and browsers. At some point, we will switch to expecting HTML5.
Please Note since both Firefox and Chrome are now distributed on a very rapid release cycle, no attempt is made to test DDCL at every release point.

The widget has been tested with browsers

Simple Multi-selector

Items may be preslected, or not
$(".s1").dropdownchecklist();
Naked Selector
 Nothing preselected
(but with explicit tabindex)
 Medium and High are preselected

Long text, shorter control

The 'width' option allows you 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.
Include icon support via ThemeRoller
$(".s3").dropdownchecklist({ icon: {}, width: 150 });
Naked Selector(styled)
 Narrow text, Wide items
 Narrow text, Wide items(styled)

Long list of options, with scroll and disabled items

The 'maxDropHeight' option allows you 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. Some select options have been disabled.
The height acts as a maximum, not a fixed value.
$(".s4").dropdownchecklist({ maxDropHeight: 150 });
Naked Selector
 Drop down list taller than the maximum, default icon
 Drop down list shorter that the maximum, custom icon

Option to let the first item in list check all items

The 'firstItemChecksAll' option allows you to 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 });
Naked Selector
 All as first option, NOT prechecked

All as first option, EXCLUSIVE
All as first option, prechecked (with explicit close)

All as first option EXCLUSIVE, prechecked (with explicit close)

Select with groups

The existing select element has groups (optgroup elements). The options are listed in groups as with original select element.
$(".s6").dropdownchecklist();
Naked Selector
 With option groups
 With option groups (disabled)

Single select with radio buttons instead of checkboxes

If the select element does not have an multiple attribute then the plugin will display radiobuttons in the list.
Note that you can include an empty placeholder as the first item to suppress the browser auto-select.
$("#s7").dropdownchecklist(); $("#s7a").dropdownchecklist({closeRadioOnClick: true });
Naked Selector
 As radio buttons
 Close on Click

Empty default text

The 'emptyText' option allows you to set the text that is displayed when no items are selected. You can include html markup in the string, which allows you full control over any special styling you may want
$("#s8").dropdownchecklist({ emptyText: "Please select ...", width: 150 });
$("#s8").dropdownchecklist({ emptyText: "<i>please select ...</i>", width: 150 });
Naked Selector
 Explicit empty text
 Explicit empty text (styled)

Function for formatting the displayed text

The 'textFormatFunction' option allows you to supply a formatting function used to display the control text. You can then customize the text display in any way you wish. The callback function is run with a single argument that is the list of selector options. 
    $(".s9").dropdownchecklist({ textFormatFunction: function(options) {
        var selectedOptions = options.filter(":selected");
        var countOfSelected = selectedOptions.size();
        var size = options.size();
        switch(countOfSelected) {
            case 0: return "Nobody";
            case 1: return selectedOptions.text();
            case size: return "Everybody";
            default: return countOfSelected + " People";
        }
    } });
Naked Selector
 Custom display text handling
 Custom display text (styled)

Callback handling when user completes their selection

The 'onComplete' option allows you to supply a callback function that is invoked when the user completes their selection and closes the dropdown. It is passed a single argument which is the original selector element.
Also, you can force the target selector into multiple selection mode by using the 'forceMultiple' option, even if the underlying <SELECT> is not marked as multiple. -- The forceMultiple option does NOT work with IE 6 -- 
    $(".s10").dropdownchecklist( { forceMultiple: true, onComplete: function(selector) {
        var values = "";
        for( i=0; i < selector.options.length; i++ ) {
            if (selector.options[i].selected && (selector.options[i].value != "")) {
                if ( values != "" ) values += ";";
                values += selector.options[i].value;
            }
        }
	  	alert( values );
    } });
Naked Selector
 With values and an alert on complete
 Forced Multiple (not on IE6)

Callback handling when user clicks any item

The 'onItemClick' option allows you to supply a callback function that is invoked when the user clicks on an item. It is passed two arguments, the generated checkbox element and the underlying html selector.
NOTE that the checkbox "checked" property reflects the user action already taken, BUT the underlying selector option state has not yet been updated.
You can reject the click by throwing any error from within your callback function. You can also modify the underlying selector option(s) state. 
    $(".s10b").dropdownchecklist( { onItemClick: function(checkbox,selector) {
	    alert("value " + checkbox.val() + ", is checked: " + checkbox.prop("checked"));
    } });
Naked Selector
 Callback on change
 Callback on change(limit)

First Item Checks All (not selected), all others preselected

The existing select element already has all options EXCEPT the first selected.
$(".s11").dropdownchecklist( firstItemChecksAll: true } );
Naked Selector
 All items selected EXCEPT the first
 All items selected INCLUDING the first

Simple Form Handling

Post a form so you can see how the values are returned to the server.
Enter the url of a form to post to in the "Post to:" field. The items returned with the form are named "selector1", "selector2", and "selector3"
We are also testing multiple selectors that do NOT have uniquely assigned ids.
$(".s12").dropdownchecklist( { width: 250 } } );
Post to:
Naked Select:
DDCL:
DDCL (with values):

LABELS just do not work

DDCL has not been designed to operate with <LABEL> tags.


Rebuild of the control

Press the appropriate button to destroy the control and rebuild it, or alter the underlying select and refresh it, or enable/disable it
$(".s13").dropdownchecklist( width: 150 } );
Naked Selector




Relative Positioned Parent Item

The parent item of the SELECT is relatively positioned, which causes positioniong problems for the dropdown in version 1.1 and before
Outside the relative parent
In the relative parent
Outside the relative parent (absolute dropdown)
In the relative parent
Outside the relative parent (relative dropdown)
In the relative parent

Parent Item that Scrolls

The parent item of the SELECT inherently scrolls, which causes positioniong problems for the dropdown in version 1.1 and before.
NOTE that the positioning fix applied with V1.2 causes the dropdown popup to position properly in all cases. However, if you use absolute positioning (the default), then the parent scrolls without dragging the popup along. You can set the popup to position relative to the parent, which will then scroll along with the parent (EXCEPT IE6 and IE7).
HOWEVER when the popup is relative, it consumes 'space' in the document and does not fly above subsequent content, but rather pushes the subsequent content further down the page.
In the scrolling parent

Content to force scrolling.

More content to force scrolling.

Even more content to force scroling.
In the scrolling parent (absolute dropdown)

Content to force scrolling.

More content to force scrolling.

Even more content to force scroling.
In the scrolling parent (relative dropdown)

Content to force scrolling.

More content to force scrolling.

Even more content to force scroling.

DDCL within a hidden parent

Initializing a ddcl within a Hidden parent causes the width/height calculation of the dynamic controls to fail.
DDCL should be made smarter in a future version to handle this.
For now, you can try moving the ddcl initialization into the 'show' processing, but watch out for multiple initialization calls.
Standard Example
Hidden Example (early ddcl init) Hidden Example (late ddcl init)

DDCL interaction with other jQuery Widgets

DDCL has shown some interesting interactions with other jQuery widgets.
In particular, DDCL's internal calculation of an appropriate z-index does not always work well with other widgets on the page. It tries to determine an approprite z-index based on parent elements, but does not take into account siblings with a high z-index value with which it may overlap.
zIndex is now a configuration option that you can set to an explicit value as needed.

Accordion Entry 1 - DDCL dropdown without explicit z-index

Sample Range Slider (which may overlay the DDCL dropdown)
 

Accordion Entry 2 - DDCL dropdown with explicit z-index

Sample Range Slider 2 (which should be under the DDCL dropdown)
 

Accordion Entry 3

Just some contents on item 3, with another sample range slider
 

jQuery Dialog support

Massive count of options

DDCL can reportly drive the browsers wonky if you have a large number of options.
Large number of options
 Large number of options (no max)
 Large number of options (with maxHeight/firstSelectsAll exclusive)