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

[代码样式]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...'
    });
});
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]Hero Slider – jQuery全屏响应式幻灯片

2020-9-10 17:14:51

脚本代码

[代码样式]PgwMenu – jQuery/Zepto响应式菜单

2020-9-10 17:14:53

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索