Selecting elements from a list box

Question

I have a list box that with a lot of items as follows :

I want to enable multiple selection on this list box and carry over the selected list items into a separate bucket :

Now I want to find the best way to select multiple items at a time,two approaces that i have thought are :

• Use Ctrl key on keyboard to select multiple enteries,but we need to keep holding that while performing the task.
• Treat each item as an entity and a single click on that item would select and deselect the item,this approach does not involve interacting with the keyboard altogether.

I want to identify the better approach or maybe a totally different approach if any.

Answer 1

I'm supporting my answer based on Google - material design - selection pattern

Touch a selected item to deselect it. Touch an unselected item to select it.

Also on long list it's a good practice to show the user what he already selected.

This can be achieved with a similar pattern to material design chips with multiple select menu.

Here is an example:

Live example: md-chips with multiple select menu

Answer 2

Jquery component https://select2.github.io/examples.html#multiple most often used, and it adapts to mobile devices There are also https://harvesthq.github.io/chosen/

Answer 3

It might be safer sticking to a more familiar and less painful interaction (aka using checkboxes).

The CTRL is reserved for OS and the risk of losing your selection is huge. Additionally, it is considered a shortcut method, so don't rely on users discovering your hidden functionality.

I would say use checkboxes and complement with Shift key to batch select. Also, give the user ways to narrow down the list by using filters or search.