Zurb Foundation 5 Multiselect

Pay attention!

This plugin is developing. If you decide to use it pay attention, the apis could change.

This is the first version and could be full of bugs. I have to test it on many devices and i'm glad if someone want join the work.

Thanks you all and LONG LIFE TO THE YETI!

Why

This is a cool way for have a nice multi-select input with zurb foundation style.
Lightweight and easy.

Dependencies?

No one. It's standalone.
(only jquery and zurb foundation)

I'm thirsty. Buy me a beer?

Demo

ZMultiSelect Box #1

$("select#box1").zmultiselect({
    live: "#live",
    placeholder: "My pretty zurb multiselect",
    filter: true,
    filterPlaceholder: 'MyFilter...',
    filterResult: true,
    filterResultText: "Showed",
    selectedText: ['Selected','of']
});

ZMultiSelect Box #2

$("select#box2").zmultiselect({  
    live: false,
    placeholder: "Box number 2",
    filter: false
});

Testing #box1 methods

open close

check ruby uncheck ruby

checkall uncheckall

Testing #box2

open close

check hotdog uncheck hotdog

checkall uncheckall

Optgroup N E W

Optgroup is now supported:

<select>
    <optgroup label='Food'>
      <option>HotDog</option>
      <option data-selected>Pizza</option>
      <option>Spaghetti</option>
    </optgroup>
    <optgroup label='Colors'>
      <option>Red</option>
      <option data-selected>Black</option>
      <option>Orange</option>
      <option>Purple</option>
    </optgroup>
</select>

Look at "JS" in #box1.

Tips

Besides the standard "selected" attribute of a <select>, you can pre-select an option using "data-selected" into your it. e.g:

<select>
    <option>HotDog</option>
    <option data-selected>Pizza</option>
    <option>Spaghetti</option>
</select>

Look at "JS" in #box1.

Options

Option	Description	Default	Example
placeholder	Set placeholder text when checkbox aren't checked	" "	$("#multiselect").zmultiselect('open');
selectedText	The text showed when checkbox are checked. e.g: "Selected 3 of 6"	"# of # selected"	$("#multiselect").zmultiselect({selectedText: ['Selected','of']}); thanks to dsmithco
get	Initializing multiselect using data from url	false	url example: http://www.andreamariani.net/zurbfoundation5-multiselect/index.html?box1=1,2,3 $("#multiselect").zmultiselect({get: 'box1'}); This will check input with value "1", "2", "3" (for the multiselect with id="multiselect")
filter	This feature add an input for filter the checkbox	false	$("#multiselect").zmultiselect({filter: true});
filterResult	Show summary checkbox visible / total	true	$("#multiselect").zmultiselect('open');
filterResultText	Change the text of summary	"showed"	$("#multiselect").zmultiselect('open');
selectAll	Prepend "Select All" and "Deselect All" in checkbox list	true	$("#multiselect").zmultiselect({selectAll: false});
selectAllText	Change the text for "Select All" and "Deselect All"	["Select All", "Deselect All"]	$("#multiselect").zmultiselect({selectAllText: ["mycustom Select All Text", "mycustom DESelect All Text"]});

Methods

Method	Description	Example
open	Open multiselect	$("#multiselect").zmultiselect('open');
close	Close multiselect	$("#multiselect").zmultiselect('open');
set	Check or uncheck checkbox using value selector	$("#multiselect").zmultiselect('set','hotdot',true);
disable	Enable or disabled checkbox	$("#multiselect").zmultiselect('disable','hotdot',true); $("#multiselect").zmultiselect('disable','hotdot',false);
checkall	Check all checkbox	$("#multiselect").zmultiselect('checkall');
uncheckall	Uncheck all checkbox	$("#multiselect").zmultiselect('uncheckall');
checkall_inpage	Check all the checkbox in the page	$("#multiselect").zmultiselect('checkall_inpage');
uncheckall_inpage	Uncheck all the checkbox in the page	$("#multiselect").zmultiselect('uncheckall_inpage');
reflow	Force reinit (useful when you change width dynamically)	$("#multiselect").zmultiselect('reflow');
destroy	Remove option	$("#multiselect").zmultiselect('destroy', 'hotdog');
getValue	Return an array of selected items	$("#multiselect").zmultiselect('getValue');
add	Dynamically append or prepend new items	var newItem = new Object(); newItem.value="checkbox_value"; newItem.text="Hello!"; $("#multiselect").zmultiselect('add', newItem, 'append'); or $("#multiselect").zmultiselect('add', newItem, 'prepend'); or $("#multiselect").zmultiselect('add', newItem, '&hotdog'); using the "&" symbol allow to insert the new item after selected checkbox; for example this new item is appended to "Hot Dog" checkbox

Event	Description	Example
onOpen	On open callback
onClose	On close callback

ZMultiSelect ~ v 0.3

multiselect plugin for zurb foundation 5 by andreamariani.net