Skip to content

Instantly share code, notes, and snippets.

@pallan
Created October 28, 2011 21:20
Show Gist options
  • Save pallan/1323595 to your computer and use it in GitHub Desktop.
Save pallan/1323595 to your computer and use it in GitHub Desktop.
jQuery extension Multiple Select Toggle
// Add a clickable plus (+) sign after a select element that when clicked
// toggles the multiple attribute on the select box
// obviously it could use some options for the toggle element, styling or
// the select size
(function($){
$.fn.extend({
multiSelectToggle : function(options){
//Settings list and the default values
var defaults = {
label: '+'
};
var options = $.extend(defaults, options);
$('._multi_select_toggle').live('click', function(e){
var selector = $(this).prev('select');
selector.attr('multiple', !selector.attr('multiple'));
})
var span = $('<span />').text(options.label).addClass('_multi_select_toggle').css('cursor', 'pointer');
$(this).after(span);
}
});
})(jQuery);
// where needed
$(function($){
$('#my_select').multiSelectToggle();
$('.many_selects').multiSelectToggle({label: 'Expand'});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment