Patrick Springstubbe sometimes a pretty awesome guy!

Demos

jQuery: MultiSelect

Turn a multiselect list into a nice and easy to use list with checkboxes. This plugin is simply an alternative interface for the native select list element. When you check an option in the plugin the value is selected on the native list. This allows the value to be submitted in a form as well as retreived through normal POST/GET and javascript methods.

https://github.com/nobleclem/jQuery-MultiSelect

  • Default

    Toggle Plugin
    $('select[multiple]').multiselect();

  • Basic 3 Column

    Toggle Plugin
    $('select[multiple]').multiselect({ columns : 3, search : true, selectAll: true, texts : { placeholder: 'Select States', search : 'Search States' } });

  • Basic OptGroup 2 Column

    Toggle Plugin
    $('select[multiple]').multiselect({ columns : 2, search : true, selectAll: true, texts : { placeholder: 'Select Languages', } });

  • Dynamically Populate List

    Toggle Plugin
    Populate List
    Get Selected Values
    $('select[multiple]').multiselect({ columns : 3, search : true, selectAll: true }); $('select[multiple]').siblings('a.loadoptions') .click(function( event ){ event.preventDefault(); var options = [{ name : 'Option 1', value : 1, checked: false },{ name : 'Option 2', value : 2, checked: true },{ name : 'Option 3', value : 3, checked: false },{ name : 'Option 4', value : 4, checked: true },{ name : 'Option 5', value : 5, checked: false }]; $(this).siblings('select[multiple]') .multiselect('loadOptions', options ); }); $('select[multiple]').siblings('a.dpopgetvalues') .click(function( event ){ event.preventDefault(); alert( 'Selected Values: ' + $(this).siblings('select[multiple]').val() ); });

  • Dynamically Populate List with OptGroups

    Toggle Plugin
    Populate List
    Get Selected Values
    $('select[multiple]').multiselect({ columns : 3, search : true, selectAll : true, selectGroup: true }); $('select[multiple]').siblings('a.loadgoptions') .click(function( event ){ event.preventDefault(); var options = [{ label : 'Group 1', options: [{ name : 'Option 1', value : 1, checked: false },{ name : 'Option 2', value : 2, checked: true },{ name : 'Option 3', value : 3, checked: false }] },{ label : 'Group 2', options: [{ name : 'Option 4', value : 4, checked: false },{ name : 'Option 5', value : 5, checked: true },{ name : 'Option 6', value : 6, checked: false }] }]; $(this).siblings('select[multiple]') .multiselect('loadOptions', options ); }); $('select[multiple]').siblings('a.dpopggetvalues') .click(function( event ){ event.preventDefault(); alert( 'Selected Values: ' + $(this).siblings('select[multiple]').val() ); });

  • Dynamically Add Option to List

    Toggle Plugin
    Add Option
    Get Selected Values
    $('select[multiple]').multiselect({ columns : 3, search : true, selectAll: true }); $('select[multiple]').siblings('a.addoption') .click(function( event ){ event.preventDefault(); var optionCnt = $(this).siblings('select[multiple]') .find('option').length + 1; $(this).siblings('select[multiple]') .multiselect('loadOptions', [{ name : 'Option '+ optionCnt, value : optionCnt, checked: false }], false ); }); $('select[multiple]').siblings('a.daddoptgetvalues') .click(function( event ){ event.preventDefault(); alert( 'Selected Values: ' + $(this).siblings('select[multiple]').val() ); });

  • Get selected values from list

    Toggle Plugin

    NOTE: There is no special way to get the selected values than regular jQuery or JavaScript. With jQuery you simple use $('select[multiple]').val(); to get the selected values.

    Get Selected Values
    $('select[multiple]').multiselect(); $('select[multiple]').siblings('a.getvalues') .click(function( event ){ event.preventDefault(); alert( 'Selected Values: ' + $(this).siblings('select[multiple]').val() ); });

  • Disable/Enable/Reset Select list

    Toggle Plugin
    Toggle Enable State
    Toggle Show/Hide
    Reset Selected Options
    Get Selected Values
    $('select[multiple]').multiselect(); $('select[multiple]').siblings('a.tstate') .click(function( event ){ event.preventDefault(); var newState = $(this).siblings('select[multiple]') .attr('disabled') ? false : true; $(this).siblings('select[multiple]') .multiselect( 'disable', newState ); }); $('select[multiple]').siblings('a.treset') .click(function( event ){ event.preventDefault(); $(this).siblings('select[multiple]') .multiselect( 'reset' ); }); $('select[multiple]').siblings('a.tshowhide') .click(function( event ){ event.preventDefault(); $(this).siblings('.ms-options-wrap') .toggle(); }); $('select[multiple]').siblings('a.dergetvalues') .click(function( event ){ event.preventDefault(); alert( 'Selected Values: ' + $(this).siblings('select[multiple]').val() ); });

  • Event when option (de)selected

    Toggle Plugin
    $('select[multiple]').multiselect({ onOptionClick: function( element, option ){ var thisOpt = $(option); alert( 'The Option "'+ thisOpt.val() +'" was ' + (thisOpt.prop('checked') ? '' : 'de') +'selected' ); } });

  • Options with data attributes

    Toggle Plugin
    $('select[multiple]').multiselect({ optionAttributes: ['data-foo'] });

  • Max Selection of Options

    Toggle Plugin
    $('select[multiple]').multiselect({ columns : 3, search : true, texts : { placeholder: 'Select States (max 3)', search : 'Search States' }, onOptionClick: function( element, option ) { var maxSelect = 3; // too many selected, deselect this option if( $(element).val().length > maxSelect ) { if( $(option).is(':checked') ) { var thisVals = $(element).val(); thisVals.splice( thisVals.indexOf( $(option).val() ), 1 ); $(element).val( thisVals ); $(option).prop( 'checked', false ).closest('li') .toggleClass('selected'); } } // max select reached, disable non-checked checkboxes else if( $(element).val().length == maxSelect ) { $(element).next('.ms-options-wrap') .find('li:not(.selected)').addClass('disabled') .find('input[type="checkbox"]') .attr( 'disabled', 'disabled' ); } // max select not reached, make sure any disabled // checkboxes are available else { $(element).next('.ms-options-wrap') .find('li.disabled').removeClass('disabled') .find('input[type="checkbox"]') .removeAttr( 'disabled' ); } } });