Home ยป Add select/deselect all on optgroup click events in Harvest’s chosen jQuery plugin

Add select/deselect all on optgroup click events in Harvest’s chosen jQuery plugin


This is just a simple snippet to add on some functionality to Harvest’s jQuery chosen plugin to allow the user to click the optgroup sections to select and deselect all items in that optgroup.

Perhaps Harvest will adapt this functionality some day but until then, here’s a quick chunk of code you can add that should work until further notice:

A demo of this can be seen here:ย http://jsfiddle.net/jphase/A6LBv/

If the chosen library gets updated and breaks my code, or if something isn’t working for you, then please post a comment to let me know.ย If you want help getting this to work, create a fiddle and link to it in your comment and I’ll help debug with you.

23 comments on “Add select/deselect all on optgroup click events in Harvest’s chosen jQuery plugin

  1. Melinda Mak on

    I have tried to run your script, but it seems not working with Chosen. When I clicked the parents group, it didn’t select all childs under this parent group. Any idea what’s wrong with that ?

    Reply
    • Jeff Hays on

      Hmm, not sure. It’s possible that chosen updated their HTML and something changed but my fiddle link (http://jsfiddle.net/jphase/A6LBv/) is actually including the latest version of the chosen library directly from their site and seems to work fine for me.

      Is my example fiddle not working for you when you click the optgroup? If so, what browser and version are you using and do you see any errors in your console?

      Reply
  2. EDWARD BYRNE on

    Hi Jeff

    Could I ask you how to use Chosen on a WordPress site with your mod? I need to know what to download, where to put it etc. I am not a coder just a hacker trying to build a site. There is a wp plugin but its very old. My thanks.

    Reply
    • Jeff Hays on

      Hey Edward,

      You’ll want to enqueue the chosen js from an action in functions.php. It will look something like this:

      This will add two scripts (chosen.min.js and custom.js) from the js folder inside your theme directory. The custom.js file is enqueued AFTER the chosen.min.js file so you can call the chosen method in custom.js like so:

      That will turn every select element with class=”chosen” into a chosen element. So just use a select tag like this:

      I’m writing this response from my phone so if syntax looks funny, I messed something up, or you can’t get it working, post back and I’ll setup a time to chat and help troubleshoot.

      Reply
      • Pascal on

        Hi,

        I would like to add this to a WordPress plugin. But my javascript clue is below zero.

        I added the chosen and custom to admin_enqueue_scripts and added above section to custom.js. So chosen on itself works. But I cannot click on the optgroup ๐Ÿ™

        I use the the class=”chosen”. Is there something I should add to for instance the custom.js or perhaps the CSS?

        Thanks so much. Briljant solution for something chosen seems to be missing.

        Reply
        • Jeff Hays on

          Hey Pascal,

          Sorry for the delay. Do you have a URL where I can test this out? Does the jsfiddle link work for you? Is there perhaps something in the newer chosen libraries that’s making this not work? I’m available to help troubleshoot on IRC (#robido on freenode) from 9-6 EST during the week if you need help as well.

          Reply
          • Pascal on

            Hi,

            Thanks for the reply!

            I use above example of wp_enqueue_scripts to load chosen.js and the custom.js. Chosen is v1.4.2 which seems to be the same version as jsfiddle loads.

            This is my custom.js code where probably the error lies.

            And I use this is to call it in the php file:

          • Jeff Hays on

            Hey Pascal,

            Try taking the code from my snippet and placing it inside your doc ready wrapper (right below the chosen call) like so:

            If that doesn’t seem to fix the issue, check your js error console and let me know if you see any errors there.

    • Jeff Hays on

      I’m sorry I’m replying so late to this, but you’re very welcome. It’s always nice to save someone time with stuff that sucked for me to have to figure out hehe.

      Reply
  3. Michiel on

    Hey Jeff

    This is a wonderful plugin, exactly what I was looking for.

    I have one question tho.
    Is it possible for you to implement a feature where we have the possibility to add the group itself as value as well? Would be cool if we are able to add the parent together with it’s children as values.

    Regards

    Reply
    • Jeff Hays on

      Hey Michiel,

      That’s definitely possible. The easiest way to do that with the code above is to simply add an option for the option group that has that option group’s value and is hidden. For example:

      This will make it so the snippet of code I wrote will see the hidden option as an option that isn’t selected/deselected and select/deselect it when you click on the option group. Let me know if you have any other questions.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *