Select Multiple Form Fields

ASMSELECT

asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options. While hidden, the original select multiple is updated as the user makes changes. Here is an example of an asmSelect:

Example

 

Select some categoriesBest PracticesClient RelationshipsCommunicationsCompensationContracts and NegotiationsDesign and Construction MarketplaceDesign/Build Project DeliveryEducationFinancial Management and ProfitabilityGlobal MarketplaceHuman ResourcesIntelligent ChoicesLeadershipManagementMarketingMergers and AcquisitionsOperations ManagementPublic RelationsStaff Recruitment and RetentionStrategic PlanningStrategySustainabilityTechnologyTrends

1. Staff Recruitment and Retentionremove

 Best Practices Client Relationships  Compensation Contracts and Negotiations Design and Construction Marketplace Design/Build Project Delivery Education Financial Management and Profitability    Leadership Management  Mergers and Acquisitions Operations Management Public Relations  Strategic Planning Strategy Sustainability   TechnologyTrendsMarketingGlobal MarketplaceCommunicationsHuman ResourcesIntelligent ChoicesStaff Recruitment and Retention

 

Advantages

No Ctrl/Cmd-Clicking is necessary to select multiple items, and an accidental click is not destructive. You add or remove items one at a time. Only the already-selected items occupy screen real estate, as they should. A remove link is included with each selected item, which eliminates ambiguity. Viewing and choosing a new item to add requires clicking on the select. This action is inherently more familiar, and displays many more available options at once, than a select multiple. More is seen at a glance and less scrolling (if any) is required to see all available options.

When an option has been selected, then it either no longer appears in the list of options, or it is disabled (grayed out and not selectable). If the user removes it from their selected items, then it naturally goes back into the list of available options.

Because this solution relies upon the familiar select pulldown, the enhancement is not likely to require additional user instruction. The cause-and-effect relationship between the select and its effect on the list is clear, as is the action for removing items from the list.

Optionally, this type of select is sortable, giving it hierarchy. The user can drag and drop the items to the desired order. Lets say that your article is related to 10 categories, which you have selected. But “Technology” and “Trends” are the most significant categories. You’d hardly be satisfied with those two categories living at the bottom of the list when your article is published on the site. Wouldn’t it be nice if you could not only select multiple categories, but also put them in the order you wanted? This solution will enable that.