ZMultiSelect Foundation 6 // Example & Docs

Github Repository

https://github.com/icyz/zurb-foundation6-multiselect

Star Fork Download

MultiSelect

Options selected (live)

Functions

getValue

$("#menu").zmultiselect('getValue')

checkAll

$("#menu").zmultiselect('checkAll')

uncheckAll

$("#menu").zmultiselect('uncheckAll')

disableAll

$("#menu").zmultiselect('disableAll')

enableAll

$("#menu").zmultiselect('disableAll', false)

disable "Pizza"

$("#menu").zmultiselect('disable', 'Pizza', true)

enable "Pizza"

$("#menu").zmultiselect('disable', 'Pizza', true)

check "Beer"

$("#menu").zmultiselect('set', 'Beer', true);

uncheck "Beer"

$("#menu").zmultiselect('set', 'Beer', false);

add "JD" (checked) add "Scotch" add "Vodka" after "Pizza"

$("#addScotch").click(function(){
    $("#menu").zmultiselect('add', {
        value: 'Scotch',
        text: 'Scotch',
        checked: false
    },
    'append'); //[append | prepend | (after an id) for example: "Pizza"]
});

destroy "Mozzarella"

$("#menu").zmultiselect('destroy', 'Mozzarella');

Open browser console and play with this:

$("#menu").zmultiselect('open')

$("#menu").zmultiselect('close')

For understand the get parameter:

index.html?zmultiselect=Pizza,Spaghetti,Eggs%202,Eggs%203

Simply select all values passed through get field (in this case the field is named "zmultiselect")

You can also change color and background editing zmultiselect.less (or, of course, zmultiselect.css)

Code

<select id="menu">
    <optgroup label="Foods">
        <option>Pizza</option>
        <option data-selected>Spaghetti</option>
        <option>Mozzarella</option>
        <option>Eggs</option>
        <option data-selected>Eggs 2</option>
        <option>Eggs 3</option>
    </optgroup>
    <optgroup label="Drinks">
        <option>Water</option>
        <option>Beer</option>
        <option>Coke</option>
        <option>Gin</option>
    </optgroup>
</select>

<script>
$("#menu").zmultiselect({

    filter: true,
    filterResult: true,
    selectAll: true,
    //locale: 'it-IT',

    //REPLACE WITH CUSTOM TEXT:
    //selectAllText: ['Check All', 'Uncheck All'],
    //selectedText: ['Selected', 'of'],
    //filterPlaceholder: 'What are your searching for?',
    //filterResultText: "Showed",
    //filterPlaceholder: 'MyFilter...',

    get: "zmultiselect",
    placeholder: "I'm a MultiSelect",
    live: '#menu_live'
});
</script>

Italian Language

Options selected (live)

$("#menu_it").zmultiselect({
    filter: false,
    filterResult: true,
    selectAll: true,
    locale: 'it-IT',

    placeholder: "MultiSelect ITA",
    live: "#menu_live_it"
});

Popperjs

Options selected (live)

$("#menu_it_popper").zmultiselect({
    filter: false,
    filterResult: true,
    selectAll: true,
    locale: 'it-IT',

    placeholder: "MultiSelect ITA",
    live: "#menu_live_popper_it",

    plugins: {
        popperjs: 'top'
    }
});