customSelect plugin with hidden elements

There is a problem where HTML select elements that are initially hidden do not update when their value is changed.  This is because the plugin cannot get the width of the element if not on the screen.

Workaround is to only trigger the plugin on hidden elements when they become visible.  A quick way to do this is to use a customSelectHidden class on the hidden selects and when they become visible run this code…

$('.customSelectHidden:visible').removeClass('customSelectHidden').addClass('customSelect').customSelect();