Chained - jQuery级联联动下拉控件插件
Chained 是一款简单易用的级联下拉框插件，提供了 jQuery 和 Zepto 两个版本。Chained 支持无限级、支持 json 数据。
基本使用
1、引入文件
如果你使用 zepto，除了引入 zepto 之外，还需要引入 zepto-selector，如2、HTML注意 value 和 class 的对应关系。3、JavaScript
$(function() {$("#series").chained("#mark");
});
更多级Chained 支持无限级，只需要后面添加即可，我们再在上面的 HTML 代码后面添加一个 select：
对应的 JavaScript：$(function() {$('#series').chained('#mark');
$('#model').chained('#series');
});
关联多个下拉框Chained 还可以关联多个父级下拉框，你需要在 class 中指定，以 “” 分割，当多个父级的值满足条件后才会显示，如：
对应的 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"
}
引导选择页面初始化的时候，你可以指定一个默认的值，如：
对应的 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
评论