当前位置:首页 > 教程 > Web前端 > jQuery/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库

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
<script type="text/javascript" src="jquery.cascadingdropdown.js"></script>

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

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

1
<script type="text/javascript" src="jquery.mockjax.js"></script>

添加相应的HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="example2" class="bs-docs-example">
	<h4>Phone finder</h4>
 
	<select class="step1" name="screen">
		<option value="">Screen size</option>
	</select>
	<select class="step2" name="resolution">
		<option value="">Screen resolution</option>
	</select>
	<select class="step3" name="storage">
		<option value="">Storage size</option>
	</select>
 
	<h4>Matches <img src="ajax-loader.gif" data-bind="visible: loading" /></h4>
	<ul data-bind="foreach: phones, visible: phones().length > 0">
		<li>
			<span data-bind="text: maker"></span>
			<span data-bind="text: model"></span>
		</li>
	</ul>
	<p data-bind="visible: phones().length == 0">No matches</p>
</div>

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

1
 <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css" />

添加相应的js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$('#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 级联下来菜单例子完整版本。

  • << 铁头功碰瓷事件当事人是谁?哪里的?这...
  • SEO - 怎样寻找&优化长尾关键词的方法示... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-html-select-cascade/

    相关文章 近期热评 最新文章

    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。