// adapted from the work of Chris Beaven https://gist.github.com/967775 jQuery.fn.selectOptgroup = function(options) { var settings = jQuery.extend({ optSelect: '_options', inBetween: '', optBlank: null, selectBlank: null, keepOrphans: true, showSpeed: 200 }, options); return this.each(function(){ var select = jQuery(this); var optSelectID = this.id + settings.optSelect; var selectedOption = jQuery('option[selected]', select) if (selectedOption.length) { var selectedValue = selectedOption[0].value; } else { var selectedValue = null; } // Only if we have an id if (!this.id) return; // Only if the opt select id doesn't exist already if (jQuery('#'+optSelectID).length) return; jQuery(this).before(''+settings.inBetween); var optSelect = jQuery('#'+optSelectID); jQuery('label[for="'+this.id+'"]').attr('for', optSelectID); var optSelectSelected = null; var orphansCount = 0; if (settings.keepOrphans) { var orphans = jQuery('> option', this).each(function(i){ var option = jQuery(this).clone()[0]; option.options = jQuery(this); option.singleOption = true; optSelect.append(option); if (this.value == selectedValue && optSelectSelected == null) { optSelectSelected = i; } }); orphansCount = orphans.length; } jQuery('optgroup', this).each(function(i){ var option = jQuery('')[0]; option.options = jQuery('option', this); optSelect.append(option); option.options.each(function() { if (this.value == selectedValue && optSelectSelected == null) { optSelectSelected = i + orphansCount; } }); }); optSelect.change(function(){ var option = this.options[this.selectedIndex]; select.empty().append(option.options); if (settings.selectBlank != null && !option.singleOption) { jQuery('').prependTo(select)[0].singleOption = true; } if (option.singleOption) { select.hide() } else { select.show(settings.showSpeed) select[0].selectedIndex = 0; jQuery(option.options).each(function(i) { if (!select[0].selectedIndex && this.value == selectedValue) { select[0].selectedIndex = i; if (settings.selectBlank != null && !option.singleOption) { select[0].selectedIndex++; } } }) } }) if (settings.optBlank != null) { optSelect.prepend(''); if (optSelectSelected != null) { optSelectSelected++; } } if (optSelectSelected == null) { optSelectSelected = 0; } optSelect[0].selectedIndex = optSelectSelected; optSelect.change(); }); } jQuery(document).ready(function() { var optgroups = [] jQuery('optgroup').each(function(){ var select = this do { select = select.parentElement } while (select.nodeName != 'SELECT') if (0 > jQuery.inArray(select, optgroups)) { optgroups[optgroups.length] = select; } }); jQuery(optgroups).each(function(){ jQuery(this).selectOptgroup(); }); });