Matching exactly option and optgroup

Matching exactly option and optgroup

First all, I like to thanks kbwood for this awesome script, however, I got an issue with this script when my select-options become long :

This is kbwood's solution with few options http://jsfiddle.net/hsQjh/5/
This is long options with issue:


http://jsfiddle.net/hsQjh/6/

My first select-box option is up to 40+ of options, thus the second select-box would be up to 40+ of optgroup as well, when I picked option '2' on first box, second box are populated all optgroup that is numbered started with 2, which is optgroup '2', '20' - '29' are populated, the same are happen to other options which is had selected too.

Could it be match the 'IDs' exactly in between option's value and optgroup's label?

  1. function filterActivityTriggeredUser(e){
  2.       var ids = $('#filterActivity + div input:checked').map(function(i) {
  3.             return $(this).val().replace(/ .*/, '');
  4.       }).get(); // Retrieve checked IDs
  5.       $('#filterSubActivity + div div label').each(function() { // Show matching options
  6.             $(this).toggle($.inArray($('input', this).val()[0], ids) > -1);
  7.       });
  8.       $('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
  9.             $(this).toggle($(this).next().find('label:visible').length > 0);
  10.       });
  11. }

Thank you.