jQuery/HTML select 级联下拉菜单动态加载插件示例

知道91 | Web前端 | 2014-09-30 | 阅读:9680

我们经常在网页特效中经常需要使用到 jQuery select 级联下拉菜单,实现这种特效需要使用HTML、CSS、jQuery的综合运用。我们如果自己动手写jQuery select 级联下拉菜单也是可以的,但是这需要一些时间,而且功能也没有这么强大,有可能你只是实现了jQuery select 2级联下拉菜单,或者3级,但是当需要更复杂的时候这个时候如果自己写就比较麻烦了。下面介绍一款jQuery + HTML +CSS Select级联下拉菜单插件,这款插件还实现了动态加载。

jQuery/HTML select 级联下拉菜单动态加载插件使用示例讲解

1、引入Javascript库

 

这里的jQuery是google库的,你当然可以替换成自己的jQuery版本。

如果要mock数据测试还需要引入jquery.mockjax.js


添加相应的HTML代码

Phone finder

Matches

No matches

并且添加相应的css,这里引用的是bootstrap的css

 

添加相应的js代码

$('#example2').cascadingDropdown({
    selectBoxes: [
        {
            selector: '.step1',
            source: [
                { label: '4.0"', value: 4 },
                { label: '4.3"', value: 4.3 },
                { label: '4.7"', value: 4.7 },
                { label: '5.0"', value: 5 }
            ]
        },
        {
            selector: '.step2',
            requires: ['.step1'],
            source: function(request, response) {
                $.getJSON('/api/resolutions', request, function(data) {
                    var selectOnlyOption = data.length <= 1;
                    response($.map(data, function(item, index) {
                        return {
                            label: item + 'p',
                            value: item,
                            selected: selectOnlyOption // Select if only option
                        };
                    }));
                });
            }
        },
        {
            selector: '.step3',
            requires: ['.step1', '.step2'],
            requireAll: true,
            source: function(request, response) {
                $.getJSON('/api/storages', request, function(data) {
                    response($.map(data, function(item, index) {
                        return {
                            label: item + ' GB',
                            value: item,
                            selected: index == 0 // Select first available option
                        };
                    }));
                });
            },
            onChange: function(event, value, requiredValues, requirementsMet){
                // do stuff
            }
        }
    ]
});

注意这里的数据是通过MockJax.js Mock的,实际运用中替换成自己的数据源,效果图如下所示。

jQuery 级联菜单,并实现动态加载

样式非常漂亮吧,以上的分析是整个的实现过程,这里实现的是动态加载内容,并运用了bootstrap的样式,这款插件非常强大,是我看到的比较好用的jQuery Select级联插件,点击此处下载jQuery Select 级联下来菜单例子完整版本。