New Version of jQuery Dropdown Checkbox List Plugin
One of the users of the dropdown-check-list plugin added a patch containing an update to take into consideration the optgroup tags, part of the select HTML element. After playing around with it and adding a few modifications, I uploaded a new version to the codebase that has this feature:
Groups in dropdown-check-list plugin
The above image corresponds to the following html code:
<select id="s6" multiple="multiple">
<optgroup label="Letters">
<option>A</option>
<option>B</option>
<option selected="selected">C</option>
</optgroup>
<optgroup label="Numbers">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
</optgroup>
</select>
The optgroup tags of the HTML select element marked with multiple attribute are inserted in the drop down container with their own css class ui-dropdownchecklist-group. The options that are part of an optgroup get a ui-dropdownchecklist-indent css class for custom indentation.
The new version can be downloaded from the google code project.
Hope to find this new feature usefull.
it conflicts with firstItemChecksAll
Please post a note on http://code.google.com/p/dropdown-check-list/issues
Is there a way to automatically expand the dropdown, for example when the page loads?
Unfortunately no
This is exactly what I’m looking for, however I can’t figure out how to make it call a javascript function when the user either selects a checkbox or collapses the dropdown without having to submit. Can you post a simple example please?
Exactly the same as you would do with a normal select. Use the change and focus events.
This is my first experience with jQuery, and I’m not grokking it yet. Here’s my test code, why doesn’t it work?
$(document).ready(function() {
$(“#s5″).dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 }).change(function () {
alert(“here”);
}).trigger(‘change’);
});
(all)
Option1
Option2
Option3
Option4
Get the latest source version from: http://code.google.com/p/dropdown-check-list/source/browse/#svn/trunk
This fixed issue (but not included in a new version) might be the problem: http://code.google.com/p/dropdown-check-list/source/detail?r=27
With the last version from source it works fine for me, just tested:
$(“#s5″).dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 }).change(function () { alert(“here”); });
Awesome, that did it! Thanks.
dumb question – how do you get the value of all the checked items?
You get the values of the checked items exactly as for a normal select. The addin is just a wrapper over the normal html select. See http://marcgrabanski.com/article/jquery-select-list-values
thanks i got it now
one more question – how can this be used with the bgiframe plugin (http://docs.jquery.com/Plugins/bgiframe) ? i need it to run on IE 6 and encounter the infamous select box z-index bug, since i have a select box just below the dropdown check list. thanks