Chained – jQuery/Zepto级联下拉框插件

分类:代码 日期:

Chained - jQuery/Zepto级联下拉框插件

简介

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

基本使用

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.chained.js"></script>

如果你使用 zepto,除了引入 zepto 之外,还需要引入 zepto-selector,如

<script src="js/zepto.js"></script>
<script src="js/zepto-selector.js"></script>
<script src="js/jquery.chained.js"></script>

2、HTML

<select id="mark" name="mark">
    <option value="">品牌</option>
    <option value="audi">奥迪</option>
    <option value="bmw">宝马</option>
</select>

<select id="series" name="series">
    <option value="">系列</option>
    <option value="a3" class="audi">A3</option>
    <option value="a4" class="audi">A4</option>
    <option value="a5" class="audi">A5</option>

    <option value="series-3" class="bmw">3系</option>
    <option value="series-5" class="bmw">5系</option>
    <option value="series-6" class="bmw">6系</option>
</select>

注意 value 和 class 的对应关系。

3、JavaScript

$(function() {
    $("#series").chained("#mark");
});

更多级

Chained 支持无限级,只需要后面添加即可,我们再在上面的 HTML 代码后面添加一个 select:

<select id="model" name="model">
    <option value="">类型</option>
    <option value="coupe" class="series-3 series-6 a5">双门跑车</option>
    <option value="cabrio" class="series-3 series-6 a3 a5">敞篷车</option>
    <option value="sedan" class="series-3 series-5 a3 a4">四门轿车</option>
    <option value="sportback" class="a3 a5">跑车</option>
</select>

对应的 JavaScript:

$(function() {
    $('#series').chained('#mark');
    $('#model').chained('#series');
});

关联多个下拉框

Chained 还可以关联多个父级下拉框,你需要在 class 中指定,以 “\” 分割,当多个父级的值满足条件后才会显示,如:

<select id="engine" name="engine">
    <option value="">排量</option>
    <option value="25-petrol" class="series-3 a3 a4">2.5 汽油</option>
    <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 汽油</option>
    <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 柴油</option>
</select>

对应的 JavaScript:

$(function() {
    $('#series').chained('#mark');
    $('#model').chained('#series');
    $('#engine').chained('#series, #model');
});

上面的代码表示 3.0 汽油版只有 3 系四门轿车、5 系四门轿车和 A5 才有。

Remote 版本

级联下拉框的数据一般不会直接写到页面,可能需要另外获取,如从 json 文件中获取等,这时候需要用到另一个版本,所以引入的文件就变成:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.chained.remote.js"></script>

我们把 HTML 的数据删除,改成从 json 文件中获取:

<select id="mark" name="mark">
    <option value="">品牌</option>
    <option value="audi">奥迪</option>
    <option value="bmw">宝马</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>

对应的 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"
}

引导选择

页面初始化的时候,你可以指定一个默认的值,如:

<select id="mark" name="mark">
    <option value="">--</option>
    <option value="bmw" selected>BMW</option>
    <option value="audi">Audi</option>n
</select>

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

对应的 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...'
    });
});
查看演示

无法下载?立即反馈