文档章节

十一、select2实现下拉菜单

ssshen
 ssshen
发布于 2017/08/30 11:51
字数 213
阅读 12
收藏 0

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="/static/css/select2.min.css">
    <script type="text/javascript" src="/static/js/select2.full.js"></script>
    <script type="text/javascript" src="/static/js/json2.js"></script>
</head>
<body>
    <div>
        <div class="mycontainer">
            <table width="50%">
                <tr>
                    <td width="50%">组:
                        <select id="group" name="group" style="width: 70%">
                        </select>
                    </td>
                    <td width="=50%">成员:
                        <select id="tester" name="tester" style="width: 70%">
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

javascript:

<script>
$('#group').select2({
    placeholder: 'select a group',
    ajax: {
        url: "/group",
        dataType: 'json',
        processResults: function(data) {
            return {
                results: $.map(data, function(item) {
                    return {
                        text: item.text,
                        id: item.id
                    }
                })
            };
        },
    }
});

$('#tester').select2({
    placeholder: 'select a tester'
}); 

// group被选择时,tester从后台获取数据并展示到前端
$('#group').on('select2:select', function(evt) {
    //清空select2的options
    $("#tester").empty();
    $('#tester').select2({
        placeholder: 'select a tester',
        ajax: {
            url: "/tester",
            type: 'get',
            dataType: 'json',
            data: {
                'group': $("#select2-group-container").html()
            },
            processResults: function(data) {
                return {
                    results: $.map(data, function(item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
        }
    });
});
</script>

效果如下:
下拉菜单效果图

参考文章:
http://select2.github.io/examples.html#events

© 著作权归作者所有

共有 人打赏支持
ssshen
粉丝 2
博文 34
码字总数 12481
作品 0
海淀
程序员
私信 提问
Jquery-Select2控件使用心得

前段时间使用了Select2控件处理下拉菜单,搞了一整天才搞明白,记录下心得。参考官网http://ivaynberg.github.io/select2/#documentation 该控件我使用了两种方式:1、基本用法;2、AJAX用法...

浮躁的码农
2015/12/24
184
0
憧憬Licoy/wakew-news

瓦客新闻网系统 瓦客新闻系统是一款基于Java-web+mysql开发的新闻一体化系统,纯JDBC+Servlet编写,无任何第三方依赖框架,一款简约而不简单的新闻系统。 使用工具 后台界面 -> beyond 提示框...

憧憬Licoy
2017/08/15
0
0
使用jquery实现权限添加的效果

两个列表都可以多选, 实现如下效果: 1、双击第一个列表中任意一个列表项,实现向下添加 2、双击第二个列表中任意一个列表项,实现删除,山东海运青岛港推动经济新发展 2、点击按钮,实现对...

墙头草
2011/08/31
0
0
Fastreport.Net用户手册(十一):Bands属性

每一个band都有一些有用的属性,这些属性会影响打印过程。 Band属性可以通过band的下拉菜单进行配置。要打开下拉菜单,需要右键点击band的空白区域,或者也可 以点击band的页眉(如果选择的是...

鸟栖沙岩
08/27
0
0
Kendo UI常用示例汇总(十六)

Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core,有40+个框架和组件;商业版整合了之前的Kendo UI Web、Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件...

Miss_Hello_World
2016/08/12
17
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
20分钟前
0
0
关于《红楼梦》的读后感优秀范文2000字

关于《红楼梦》的读后感优秀范文2000字: (在写读《红楼梦》有感的路上遇到了博友“五音不全”师兄,使我感到汗颜,于是放弃了87版的电视剧,只读原著《红楼梦》和五音的评红作品,对原著才...

原创小博客
32分钟前
1
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
34分钟前
1
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
2
0
Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部