Patrick Springstubbe sometimes a pretty awesome guy!

Demos

jQuery: MultiSelect

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' ); } });