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

我们经常在网页特效中经常需要使用到 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

	
		Screen size
	
	
		Screen resolution
	
	
		Storage size
	

	
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的，实际运用中替换成自己的数据源，效果图如下所示。

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