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
    $('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
    $('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 Select list

    Toggle Plugin
    Toggle Enable State
    $('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 ); });
  • 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'] });