Software Twist – Adrian Tosca Blog

New Version of jQuery Dropdown Checkbox List Plugin

Posted in Software Development by Adrian Tosca on 2009, April 11

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

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.

Advertisements
Tagged with: ,

17 Responses

Subscribe to comments with RSS.

  1. Olivier Binda said, on 2009, July 19 at 12:38

    it conflicts with firstItemChecksAll

  2. Brad said, on 2009, August 22 at 16:17

    Is there a way to automatically expand the dropdown, for example when the page loads?

    • aleris said, on 2009, September 4 at 21:15

      Unfortunately no

  3. Doug said, on 2009, September 4 at 20:11

    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?

    • aleris said, on 2009, September 4 at 21:18

      Exactly the same as you would do with a normal select. Use the change and focus events.

  4. Doug said, on 2009, September 4 at 21:53

    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

  5. Timsta said, on 2009, September 21 at 15:12

    hi adrian,

    really cool script. thank you for that. i tried but i couldnt figure out where to put in background image to the multiple select option fields. this is whipped out by your script, but i cant find where.

    3

  6. mango said, on 2009, October 29 at 20:46

    dumb question – how do you get the value of all the checked items?

    • aleris said, on 2009, October 30 at 11:45

      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

      • mango said, on 2009, November 3 at 02:04

        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

  7. Rickard said, on 2009, December 18 at 18:17

    Hi!

    Great plugin.
    Is there anyway to set a default text until selected?

  8. Denis said, on 2010, January 7 at 13:20

    Hi! The plugin is great!

    but how I can expand it from script?

    $fobj.dropdownchecklist({ width: ‘200px’ });
    $fobj.dropdownchecklist(‘_toggleDropContainer’);

    only create new select and don`t open it.


Comments are closed.

%d bloggers like this: