Chained - jQuery级联联动下拉控件插件

Chained 是一款简单易用的级联下拉框插件，提供了 jQuery 和 Zepto 两个版本。Chained 支持无限级、支持 json 数据。

基本使用

1、引入文件

如果你使用 zepto，除了引入 zepto 之外，还需要引入 zepto-selector，如
2、HTML
品牌奥迪宝马
系列A3A4A53系5系6系
注意 value 和 class 的对应关系。
3、JavaScript
$(function() {
    $("#series").chained("#mark");
});
更多级
Chained 支持无限级，只需要后面添加即可，我们再在上面的 HTML 代码后面添加一个 select：
类型双门跑车敞篷车四门轿车跑车
对应的 JavaScript：
$(function() {
    $('#series').chained('#mark');
    $('#model').chained('#series');
});
关联多个下拉框
Chained 还可以关联多个父级下拉框，你需要在 class 中指定，以 “” 分割，当多个父级的值满足条件后才会显示，如：
排量2.5 汽油3.0 汽油3.0 柴油
对应的 JavaScript：
$(function() {
    $('#series').chained('#mark');
    $('#model').chained('#series');
    $('#engine').chained('#series, #model');
});
上面的代码表示 3.0 汽油版只有 3 系四门轿车、5 系四门轿车和 A5 才有。
Remote 版本
级联下拉框的数据一般不会直接写到页面，可能需要另外获取，如从 json 文件中获取等，这时候需要用到另一个版本，所以引入的文件就变成：
我们把 HTML 的数据删除，改成从 json 文件中获取：
品牌奥迪宝马
系列
类型
排量
对应的 JavaScript：
$(function() {
    $('#series').remoteChained({
        parents: '#mark',
        url: '/api/series.json'
    });
    $('#model').remoteChained({
        parents: '#series',
        url: '/api/model.json'
    });
    $('#engine').remoteChained({
        parents: '#series, #model',
        url: '/api/engine.json'
    });
});
Json 可以的格式如下，第一个是 value，第二个是文本：
{
    "" : "--",
    "series-1" : "1 series",
    "series-3" : "3 series",
    "series-5" : "5 series",
    "series-6" : "6 series",
    "series-7" : "7 series"
}
引导选择
页面初始化的时候，你可以指定一个默认的值，如：
--BMWAudin
--
对应的 JavaScript：
$(function() {
    $('#series').remoteChained({
        parents: '#mark',
        url: '/api/series.json',
        bootstrap : {
            '': '--',
            'series-3': '3系',
            'series-5': '5系',
            'series-6': '6系',
            'selected': 'series-3'
        }
    });
});
当页面加载的时候，会默认选择“3系”。
显示 loading
当数据较多时，加载可能需要花费一些时间，为了更好的体验，可以在加载数据时显示 loading：
$(function() {
    $('#engine').remoteChained({
        parents: '#engine, #model',
        url: '/api/series.json',
        loading: 'Loading...'
    });
});
官网：http://www.appelsiini.net/projects/chained
下载：github