Chained Selects Stable Release

Blog Projects
JavaScript jQuery Zepto Chained

Chained is now stable and in feature freeze. In 2.x.x version class support will be removed. Next major version will use data attributes will be used instead. After all, it is 2014 already!

Legacy syntax removed

Stable version removes legacy syntax. It is not 100% compatible with 0.9.x branch. You must pass all options to remote version as JavaScript object. Example of all possible options below.

$("#series").remoteChained({
    parents : "#mark",
    url : "/api/series.json",
    depends : "#series",
    loading : "Loading.",
    bootstrap : {
        "" : "--",
        "series-3" : "3 series",
        "series-5" : "5 series",
        "series-6" : "6 series",
        "series-7" : "7 series",
        "selected" : "series-3"
    }
});

Class based version does not have any configuration. You only need to pass parent selector.

$("#engine").chained("#series, #model");

Chaining to non select inputs

You can now also chain to other inputs than selects. Usual case would be hidden or text.

<input id="mark" name="mark" value="audi">
<select id="series" name="series">
    <option value="">--</option>
</select>

$("#series").remoteChained({
    parents : "#mark",
    url : "/api/series.json"
});

Three different JSON formats

Plugin now accepts three different JSON formats. Pass either JavaScript object containing value – text pairs for each option.

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

If you need to be able to sort entries on server side use array of arrays…

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

… or array of objects.

[
  { "" : "--" },
  { "series-1" : "1 series" },
  { "series-3" : "3 series" },
  { "series-5" : "5 series" },
  { "series-6" : "6 series" },
  { "series-7" : "7 series" },
  { "selected" : "series-6" }
]
PRO TIP! But that is not all. Be sure to read full documentation. Bug reports and features request should be made at GitHub.

Install

Download latest minified or remote version minified. You can also install with bower.

$ bower install chained


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.