Chained Selects Stable Release

Chained is now stable and in feature freeze. In 2.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" }
]

Install

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

$ bower install chained

Posted in

JavaScript