Chained Selects jQuery Plugin

Blog Projects
JavaScript jQuery Zepto Chained

Latest usage and examples can be found from separate chained selects project page. There is also a demo page.


Photo Dan Barbus

Recently I needed to do chained select navigation for a project. It was relatively simple. I did not want to go through hassle of setting up Ajaxified database queries. I liked API of Dependent Select. However I needed to make small modification to suit my needs. I quickly realized it is faster to write the plugin from scratch than trying to understand the original code. I also felt original version had too many lines of code for such a simple plugin. Bit later Chained was born

What is Chained?

Chained is simple jQuery plugin for chained selects. It does not make external AJA(X|H) queries for setting content of child selects. Instead it uses classnames of select options to decide content. As a bonus it is usable even with JavaScript disabled. However with JavaScript disabled there is one catch, all options will be shown to user.

Chained is great when you need something simple and quick. If you have long and complicated select trees you are better off with traditional “Make an AJAX database query to build next select” approach. Good option is Select Chain written by Remy Sharp.

Simple Usage

Child selects are chained to parent select. All selects must have an id attribute. Child select options must have class names which match option values of parent select. When user selects something in parent select the options in child select are updated. Options which have matching classname with parents currently selected option will stay visible. Others are hidden.

Lets assume you have the following HTML code:

<select id="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

You can now chain the series to mark. There are two different ways to do it. Choose yourself if you prefer more english like or shorter version. I prefer the shorter version.

$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */
 Try here to see how it works.

Many Selects

Let’s add a third select. Because we all love coupes don’t we? Notice how there is a coupe for BMW series 3 and 6 and also Audi A5. Sportback is only for Audi A3 and A5.

<select id="model">
  <option value="">--</option>
  <option value="coupe" class="series-3 series-6 a5">Coupe</option>
  <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
  <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>

Now lets chain model to series.

$("#series").chained("#mark");
$("#model").chained("#series");
 Try here to see how it works.

Chaining to Multiple Parents

One child can also have two parents. Available options on child chained to multiple parents depend on one or both of the parents selected values. Here is code for fourth select. Note how diesel engine is available only for BMW 3 and 5 series Sedans. Coupes wont have diesel. Unless it is an Audi of course. Oh my.

<select id="engine">
  <option value="">--</option>
  <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option>
  <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
  <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option>
</select>
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");
 Try here to see how it works.

Download

You can download the source or minified. If you want to peek under the hood check Chained in Github.



When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.