MultiSelect

Takes a <select multiple> that has a class of "multiselect" and makes it into a more usable component. Standard <select multiple> elements are hard to use due to needing to be sure you are holding the control key down when making multiple selection, and not showing all selected items at once. This provides a differnt view into the selected items.

For the developer, this is 100% front-end trickery. Any changes the user makes is made to the original <select multiple> and that is what you will look for to get submitted back. It's like the front-end stuff never even happened.

HTML

You just need a standard multi-select box. Which the script aill automatically convert to individual dropdowns.

<select id="test" name="test" multiple="multiple" size="3">...</select>

CSS

No extra CSS needed if you are using the sprites. Otherwise you will need to define images to be used via the addPath/removePath or have classes available to be used for the add/remove buttons.

API

These are the variables that you can set to turn on and off various options.

$("#example").multiSelect({maxFields:5});
Name Type Default Options Description
addWhere string bottom values(bottom/top) where to show the "adder" link. new fields always add to bottom
maxFields number 0 what is the maximum number of fields they can have (0 for infinite). Auto sets maxFields to the total number of options in original select element
adderClass string sprite icon add class to apply to the adding anchor (using classes to leverage sprites by default)
addPath string Path to the add icon image.
addTitle string Add additional row Text use for the title attribute.
removerClass string sprite icon delete class to apply to the removing anchor (using classes to leverage sprites by default)
removePath string Path to the remove icon image.
removeTitle string Remove this row Text use for the title attribute.
removeConfirm string Are you sure you want to remove this? text that is displayed by the JS prompt when removing an item.
matchWidths boolean true Should the script keep all the dropdown widths the same. If false, when longer options are selected (and thus removed from other dropdowns) the width of those dropdowns will reduce and icons will not all line up
onAdd function Script to fire after an element is added. Element that is added is passed in.
onDelete function Script to fire after an element is removed.
onChange function Script to fire after an element is changed. Element that is changed is passed in.

Options = The script only recognizes these values

There is no currently exposed API via the IxF.