Create Amazing Select Boxes with Chosen in Drupal

Chosen is a jQuery plugin that converts long select boxes into a more user friendly form element. The plugin adds auto-complete functionality to select boxes, and this makes it easier for users to navigate through long select lists. Go to the Chosen homepage to see it in action.

In this article, we’ll look at the Chosen Drupal module which integrates the jQuery plugin with Drupal.

Getting Started

Before we begin, download the Chosen plugin directly from GitHub and extract the zip file into sites/all/libraries. Once the plugin has been extracted the path should be sites/all/libraries/chosen.

Finally, download and install Chosen and Libraries API module. For this article, I’ll be using the 7.x-2.0-alpha1 release of Chosen.

Configuring Chosen

Chosen works pretty well out of the box. The module has a configuration page, go to Configuration -> Chosen (admin/config/user-interface/chosen) to view the page.

Fig 1.0

The most important configuration to take note of is the “Apply Chosen to the following elements” text area. Using the text area, you can control which element will be taken over by Chosen. We’ll leave everything as default.

Chosen Plugin in Action

For this article, I added a bunch of Drupal module names into a “Tags” vocabulary and then created a simple view listing that filters content by a taxonomy term.

This is what the filter looks like when you set the filter operator to “Is one of”. Meaning a user can only filter by selecting a single tag:

Fig 1.1

Now if we switch the filter and allow multiple selections, this is what the filter looks like:

Fig 1.2

Chosen on Mobile

We have seen how Chosen works within a desktop browser, let’s now load up the same views listing page on a mobile device. For this very basic test I used the iOS Simulator that comes with Xcode on OSX 10.8.

Here is what a single selection select box looks like.

Fig 1.3

The same select box but this time it allows multiple selections.

Fig 1.4

If you have any questions, please leave a comment.

About The Author

11 thoughts on “Create Amazing Select Boxes with Chosen in Drupal”

  1. Chosen 7.x-1.0, which is Drupal’s “Recommended Resease”, does not work. It breaks Drupal Core by precluding the selection of form elements to manage fields (widgets) for adding new fields. It also conflicts with CSS compression using Performance Caching. I don’t know why this version remains posted as “Recommended”. Anyway, I am about to try the 7.x-2.0-alpha1 version that you suggest, and I had a couple of comments and questions: (1) Your instructions of “Getting Started” seem to be redundant because you mention installing Chosen twice. Is this correct? (2) Why does Chosen have to come from GitHub when the module is available to auto-install directly from Drupal? (3) Are there any uninstall considerations for the old version?

    1. (1) Your instructions of “Getting Started” seem to be redundant because you mention installing Chosen twice. Is this correct?

      You first need to download the jQuery plugin from GitHub and then download the module which integrates the jQuery plugin with Drupal.

      Why does Chosen have to come from GitHub when the module is available to auto-install directly from Drupal?

      When you say “auto-install” do you mean a Drush Make file? Not everyone uses Drush, so I need to accommodate for those people.

      (3) Are there any uninstall considerations for the old version?

      Sorry, I don’t know what you mean by “uninstall considerations”.

  2. Beautiful script but sadly the Drupal module doesn’t work on select boxes that are part of conditional fields.

    I have tried 3 other jquery scripts and all either don’t apply to everything or break horribly in mobile.

  3. Hi Ivan Zugec,

    It’s pretty good to see on the content field sections, but i can’t able to assign the same “Chosen” on views section like when we add some filter criteria for both user can use this filter in this case how can we assign the dropdown list with “Chosen” here ?

    Thanks in advance

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top