IntroductionA progressive enhancement to form elements. It provides a simpler alternative with the following advantages:
Use a jQuery selector in your document ready function:
If desired, you can specify options when you call the plugin:
To optionally set a label inside the select, set the title attribute:
OptionsThe following options may be specified using the format in the example directly above this section.
Primary OptionslistType: Specify what type of list will be created as part of the asmSelect. Allowed values: 'ol' or 'ul' Default: 'ol' sortable: May the user drag and drop to sort the list of elements they have selected? Allowed values: true or false Default: false Note: In order to use this option, you must have jQuery-UI Draggables, Droppables, and Sortables enabled. highlight: Show a quick highlight of what item was added or removed? Allowed values: true or false Default: false animate: Animate the adding or removing of items from the list? Allowed values: true or false Default: false hideWhenAdded: Stop showing in select after item has been added? Allowed values: true or false Default: false Note: Only functional in Firefox 3 at this time. addItemTarget: Where to place new selected items that are added to the list. Allowed values: 'top' or 'bottom' Default: 'bottom' debugMode: Keeps original select multiple visible so that you can monitor live changes made to it when debugging. Default: false Text LabelsremoveLabel: Text used for the remove link of each list item. Default: 'remove' highlightAddedLabel: Text that precedes highlight of item added. Default: 'Added: ' highlightRemovedLabel: Text that precedes highlight of item removed. Default: 'Removed: ' Modifiable CSS ClassescontainerClass: Class for container that wraps the entire asmSelect. Default: 'asmContainer' selectClass: Class for the newly created . Default: 'asmSelect' listClass: Class for the newly created list of listType (ol or ul). Default: 'asmList'
listSortableClass: Another class given to the list when sortable is active. Default: 'asmListSortable'
listItemClass: Class given to the list items. Default: 'asmListItem' listItemLabelClass: Class for the label text that appears in list items. Default: 'asmListItemLabel' removeClass: Class given to the remove link in each list item. Default: 'asmListItemRemove'
highlightClass: Class given to the highlight . Default: 'asmHighlight'
Known IssuesIn Firefox (all versions), if your form has an asmSelect that precedes radio buttons or checkboxes, then you should set Firefox's autocomplete to off. Otherwise, if the user manually reloads the page containing the form, it's possible for radio/checkbox values to be wrong. This is not an issue with asmSelect, but rather a general issue with Firefox and dynamic form fields. See this issue report for more information The animating of adding/removing items is not as smooth in IE6/IE7 as it is in other browsers. There appears to be an issue with jQuery slide effects on list items with IE, so hopefully this will not be an issue forever. If you don't like the animation behavior in IE, I suggest setting animate to false. (false is the default) In Safari 3 and Firefox 2, the 'add item' animation is not as smooth as in Firefox 3, though the removing is. Improvements need to be made here for more consistent animations across different browsers. The hideWhenAdded option only works in Firefox 3 at this time. All other browsers continue to show the added items, but they are greyed out (disabled) and not selectable. This may in fact be preferable since the disabled items are placeholders. In Internet Explorer, there is a slight gap between items that is not present in other browsers. Should be an easy fix with CSS, but haven't found it yet. In Internet Explorer 6 (IE6), when dealing with a larger list of items, IE6 will sometimes do some odd scrolling within the select after an item is selected. Also in IE6, when the list is sortable, the screen will flash every time you add an item. This appears to be getting triggered by the jQuery UI sortable("refresh") function that asmSelect calls. TODOAdd user definable callback functions for add and remove Make it possible for a selection in one asmSelect to alter the available options in another multiple select or regular select form field. Set a limit for max number of selected items. When the list is sortable, the items will take on a new look with something tactile to make it more obvious that they can be dragged. Please let me know if you have any other suggestions. Please NoteDisclaimer - This is a beta version, and as such is not intended for production use yet. If you come across any bugs or issues, or if you see room for improvement in the way it works, or the underlying code, please contact me. As of July 15th, 2008, asmSelect has been confirmed to work properly with Firefox 2 & 3, Safari 3, IE6, IE7, and Opera 9.5. There are some issues with IE6. See Known Issues above. Copyright 2008, 2009 by Ryan Cramer
These details are provided for information only. No information here is legal advice and should not be used as such.