[代码样式]Chained – jQuery/Zepto级联下拉框插件

简介

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

基本使用

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.chained.js"></script>

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

<script src="https://www.dowebok.com/js/zepto.js"></script>
<script src="https://www.dowebok.com/js/zepto-selector.js"></script>
<script src="https://www.dowebok.com/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="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/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...'
    });
});