Drupal 7 jQuery SelectBox Module

By shane
Thu, 2013-02-28 15:42
Daily Dose of Drupal Episode #117

Share with Others

The Drupal 7 jQuery SelectBox module is a simple module that makes HTML select boxes easier to style. It replaces the HTML form select element with easier to style HTML markup.

In this episode you will learn:

  • How to download and install the jQuery SelectBox module
  • What the jQuery SelectBox module is doing in the background to make the select boxes on the site continue to work correctly

Thanks to Drupalize.me for sponsoring this episode.

Hello everyone and welcome to another Daily Dose Drupal, today we’re on Episode Number 117. Today we’re going to be going over the J Querry Select Box Module. The J Query Select Box Module basically replaces your standard select box in Drupal with a more stylable, more themeable, more CSSable select box and actually replaces the select box with some HTML that you can then easily change the style to and then of course it communicates back when you click something in this new HTML structure it selects that iem in the actual select list. It uses the plug-in that you’ll need to select the jQuery Select Box plug-in so you’ll have to go ahead and download that, you can see the installation instructions, you need the libraries module.

In the Sites All Libraries directory you’re going to need to create a directory called J Query.Select Box and you’re going to need to download the plug-in from Get Hub and then of course install the plug-in and enable the J Query Select Box Module.
So go ahead and follow those steps and once you’re there we can go ahead and get started but before we do, as always I am Shane Thomas, you can follow me on Twitter at smthomas3, you can also go to codekarate.com check out the other Daily Dose of Drupal videos and sign up for the newsletter. Today’s episode is sponsored by drupalize.me.

Drupalize.me is one of the best places to learn about Drupal so whether you’re just getting started or if you’ve been around awhile, check out their videos on Drupal, they have free videos and if you do want to sign up use the coupon code CK20FEB you get 20% off. Let’s go ahead and get started; so I have the module downloaded in the library where the J Query Select Box library dropped in as well so I’m going to come down here and turn on the J Query Select Box Module, click Save and … but before I do I’m actually going to disable it first to show you a little bit of before and after.

So I’ll go ahead and I’ll go to this Add Content and I have the Select Test Content Type with two different types to select list; a Multiple Select and a Single Select. If you look at the HTML structure it’s pretty much what you should expect, just a simple HTML element with option values, the Multiple Select is also very similar. Now let’s go ahead and turn the module and see what happens. Now the module is turned on I will come back to this page, you can see immediately it looks a little bit different so let’s take a look at the HTML Structure now.

You can see if I hover over this it says it’s a Span, it’s inside of a link and if I click on it you can see each one of these are just a link inside of that Span, well actually it’s its own link UL with allies, list items inside of that and it uses a class of selected. So what you can do here since it’s just a normal HTML list you can theme it or style it however you want and it will look the way that you wanted to.

It takes away the normal restrictions on theming and styling at traditional select box, you can also look at the multiple select as well that that is also just a list. One thing to keep in mind is you’ll notice that there’s a Select option right here and you’ll see right here it says Display None. It’s actually being hidden and you’re selections here correspond with the selections on the actual element so this over here that you’re actually clicking on is just a copy but when you make those selections it of course makes those selections on the hidden element which is the traditional select box, does the same for the single select up here.

So that’s how the Select Box Module works, it makes it easy for you to theme and style your Select Boxes however you want so it gets rid of a lot of the normal limitations so go ahead and give this module a try on your next Drupal website where you need to theme or style your Select Boxes. Thanks again to drupalize.me and the thank you for watching the Daily Dose of Drupal. See you next time.


Nice tip in general but I personally think that the Chosen module is a much better (and widely used) alternative! :)

I was actually going to try to use the chosen module (which I have had success with in the past). However I couldn't get it to run on even a clean install. Found a bug report in the issue queue that had the same issue as mine (also tried the dev version with no luck).

Did some basic debugging, verified JS files were loading, verified the chosen.js file was executing on page load and was pulling in the correct selectors, however it was like the plugin wasn't firing. No console errors either. After an hour of trying to figure it out, I gave up.

When I have more time I plan on debugging the issue further to determine the cause. Once it seems to be running solid again, will probably do a video on it.

whoa, that's odd! I've been using the 2.x-dev version extensively in multiple projects for the past couple months with no hiccups... would you mind linking the issue?

Shamelessly plugging Select with Style for those who really want to go overboard with styling select boxes.
Like supporting stye-able hierarchies, so that you can have, say, city terms appear with the flag of their parent country, or products in a department store appear with an icon or colour indicating the department they belong to.

I am also having problems using chosen.
It disalbles the admin_menu and does not let me add 'chosen' to the select field.
In admin/structure/types/manage I cannot expand the chosen link

Post new comment