html select自动加载,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 级联下来菜单例子完整版本。