0

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.

conmen
  • 2,377
  • 18
  • 68
  • 98

1 Answers1

5

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/

btevfik
  • 3,391
  • 3
  • 27
  • 39
  • i have firefox right now i will try again in chrome and let you know – btevfik Mar 19 '13 at 04:22
  • it seems like `hide()` option does not work in Chrome and IE, just Firefox implemented it for `option`. – btevfik Mar 19 '13 at 07:44
  • you might be able to get it working with using `append` and `remove` functions. i have tried it but it kind of gets messy. if you spend some time you can do it i think though – btevfik Mar 19 '13 at 07:44
  • refer to this too http://stackoverflow.com/questions/4699410/hiding-options-of-a-select-with-jquery – btevfik Mar 19 '13 at 07:50
  • if you get it to work please add it to your question and let me know i would like to see – btevfik Mar 19 '13 at 08:41
  • What I did instead was create a JSON object where I store all my options for the select with their respective option group. I reload the group the user selects from the object. It re-draws all the options each time you toggle the filter so probably not the best approach for long lists of items but works like a charm for my needs. – radtek May 26 '14 at 19:46
  • This works in Chrome and FF but not in IE 11 (it does work in Edge) – Jason Feb 28 '18 at 13:14