Chained Selects jQuery Plugin

Chained is simple jQuery plugin for chained selects. You can choose from two different versions. Use jquery.chained.js if you do not want to make external queries for setting content of child selects. This version 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.

For more complex scenarios maintaining option tag classnames will get cumbersome. Also is you want to make queries against database use jquery.chained.remote.js instead. This version makes an external AJAJ query and uses the returned JSON to build child selects.

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.

First you must include jQuery and Chained in your code:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>

Then lets assume you have the following HTML code:

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="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"); */

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" name="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");

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. To make child select depend on values of both parents use classname like first\second.

Here is code for fourth select. Note how diesel engine is available only for BMW 3 and 5 series Sedans. This is achieved by using classnames series-3\sedan and series-5\sedan.

<select id="engine" name="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");

Using Remote Version

Using the remote version is similar to what has been explained above. First include jquery and remote version of Chained:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.remote.js" type="text/javascript" charset="utf-8"></script>

In HTML you only need to provide option tags for the first select. Contents of other select will be built from the AJAJ request which is done when value of parent select changes.

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
</select>
<select id="model" name="model">
  <option value="">--</option>   
</select>
<select id="engine" name="engine">
  <option value="">--</option>   
</select>

In JavaScript you must use method remoteChained(). Second parameter is URL where the AJAJ request is sent.

$("#series").remoteChained("#mark", "/data/json.php");
$("#model").remoteChained("#series", "/data/json.php");
$("#engine").remoteChained("#series, #model", "/data/json.php");

When change event of parent select is triggered GET request is sent to the given URL. This request includes the id and value of parent selector in the query string. For example when users selects BMW in the first select the following request is made:

GET http://example.com/data/json.php?mark=bmw

Chained expects JSON response which contains value – text pairs for each option. Use either JavaScript object which looks prettier if you snoop AJAJ traffic:

{"":"--","series-1":"1 series","series-3":"3 series","series-5":"5 series","series-6":"6 series","series-7":"7 series","selected":"series-6"}

or use array of arrays if you need to be able to sort entries on server side:

[["","--"],["series-1","1 series"],["series-3","3 series"],["series-5","5 series"],["series-6","6 series"],["series-7","7 series"],["selected","series-6"]]

Download

You can download the jquery.chained.js (minified) or jquery.chained.remote.js (minified)" If you want to peek under the hood check Chained in Github.

• Tweet
• G+