Jquery hide/show optgroup base on main selector

Question

Please refer to this link , is a multiple select box to select sub-activity base on what is picked in main-activity, its working pretty well now.

Based on change request, I want to make the action to show only the optgroup in sub-activity when it being select, means when you select main-activity option 1 and 2, sub-activity are show optgroup for 1 and 2, the rest are hide and not visible, please advise, thanks.

Answer 1

you need to get not selected options and hide() them in subactivity. and not forget to show selected ones.

 //get not selected ones
 var arr1 = $('#filterActivity option:not(:selected)');

  //iterate and hide 
  $("#filterSubActivity").children("optgroup[label='" + arr1[j].value + "']").hide();

here is demo: http://jsfiddle.net/btevfik/q62PK/