The standard multiple select list can be difficult to use, if your users are not very technical. Most of the time they won’t know that you have to hold down command or ctrl key if you want to select multiple options. Also, once you have more than 10 options, the select list becomes very difficult to use. One wrong move and you can loose all the selected options.
The Multiselect module defines a widget that allows users to move selected items from one box to another. Visually this helps users to see which items have been selected. The widget can be used on a bunch of field types and it can be implemented as a form element using FAPI.
If you want to use Multiselect on an entity reference field, then use the 7.x-1.x-dev version.
Getting Started
Download and install the Multiselect module.
Configure Multiselect on Term Reference Field
In this section, we’ll use the Multiselect widget on the Tags field that is created when you install Drupal using the standard installation profile.
1. Structure -> “Content types” and click on “manage fields” within the Article row.
2. Click on Edit within the Tags row and then click on the “Widget tab” in the top right corner.
3. Select Multiselect from the “Widget type” select list and click on Continue.
4. Go to Content -> “Add content” and click on Article. Now the Tags widget has changed to a Multiselect widget.
Form API Multiselect Widget
You can also use the Multiselect widget on custom forms by defining '#type' => 'multiselect' on a form element. Thankfully, the module ships with “Multiselect FAPI Example” module that shows you a working example.
1. Enable the “Multiselect FAPI Example” module.
2. Go to /multiselect_fapi_example and you should see the example form.
Open the multiselect_fapi_example.module file and go to multiselect_fapi_example_display(). In this function you’ll see the multiselector form element.
$form['multiselector'] = array(
'#type' => 'multiselect',
'#title' => t('Here is the multiselect'),
'#options' => array(
'title' => t('Titles only'),
'teaser' => t('Titles plus teaser'),
'fulltext' => t('Full text'),
'1' => t('Option 1'),
'2' => t('Option 2'),
),
'#default_value' => _multiselect_fapi_example_options(),
'#multiple' => TRUE,
'#size' => 15,
'#required' => TRUE,
);
If you have any questions, please leave a comment.
Very good the tutorial, thanks. I have a question, how can I change the labels “avaible options” and “selected options”?
Thanks for your help.
You can’t change those labels via a configuration page. However, there are two ways you could do it.
The first way, is to use the String Overrides (http://drupal.org/project/stringoverrides) module. This module allows you to override text that is passed through the “t()” function. This is the least “hacky” way. 🙂
Another possible option is to use JavaScript to change the labels.
If you’re curious, look at the _multiselect_build_widget_code() function to see the labels.
Is there a way to make the multi select widget wider in D6. We are using two fields in a view as the source for the data populating the widget, but not all of the information is visible.
I haven’t used the D6 version in a while, but couldn’t you widen the form elements using CSS?
Hello ivan, Thanks for this great post,
Can u please tell me how to use multiselect in drupal 7 webform.
I don’t think there is out-of-the-box integration between Webform and Multiselect. You’ll have to implement a custom webform field to use Multiselect.
I found an issue in the Webform issue queue asking the same question. (https://drupal.org/node/1984178)
i will try to do it by template preprocessor …by d way thanks for reply 🙂
Ivan, thanks for the hint to use the 7.x-1.x-dev version of the module on entity reference fields.
I was ready to give up and not use the module but then found your posting. Perfect!
In both the example and the on my custom module. The select boxes are not side by side they are on top of each other and neither the Add or Remove links work. Any ideas about what I might be doing wrong?
Not sure what the problem is, you should ask in the issue queue.
Hey Ivan,
thank you for this. Very interesting. I use the multiselect on ‘Entity Reference’ but after ‘Publishing’ and clicling on ‘Edit’ the multiseletc can not show/remember the seletced tags.
Did you already experiences this issue?
Sincerely
Hermann
Hi Hermann,
Never seen this happen. Do you get any errors?
Cheers,
Ivan
The above code is not working for me.Actually I am very new in Drupal. The first issue is (1)The available options and add/remove button and selected options are displaying one after another.(2)Add and remove not working.Am I missing anything?
Hi Celin,
Are you getting any PHP errors? JavaScript errors? Make sure you’re running the latest version of the module. Search the issue queue for similar problems: https://www.drupal.org/project/issues/multiselect?categories=All
That’s all I can really recommend without debugging it.
Cheers,
Ivan