文档章节

十一、select2实现下拉菜单

ssshen
 ssshen
发布于 2017/08/30 11:51
字数 213
阅读 13
收藏 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
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
使用jquery实现权限添加的效果

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

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

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

鸟栖沙岩
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redox OS 发布 0.5 版

Redox OS 是一个几乎完全以 Rust 语言编写的通用操作系统及周围生态(例如文件系统、显示服务器及 Rust 版本的 libc)。其遵循微内核架构,在一定程度上兼容于 POSIX。 该项目于日前发布了 ...

linuxCool
54分钟前
2
0
更新上传git/gitee项目时出现密码配置错误(incorrect username or password)的解决办法

1.输入【git remote add origin git地址】 命令时出现incorrect username or password的错误,这是因为之前弹出输入账户和密码时输错了,而且会一直默认错误的账户和密码,因此需要把之前输入...

west_coast
今天
0
0
Jenkins基础入门-1-Jenkins简单介绍和环境安装

如果在做自动化测试的朋友,应该熟悉Jenkins,或者至少使用过。如果一个人没有使用过Jenkins或者hudson,hudson是Jenkins的前身,他还说自己做过自动化测试,只能说,他只不过是在做半自动化...

shzwork
今天
0
0
linux上解压版安装jdk,tomcat

需要的安装包 1.vmware12 2.centos7版本 3.安装完成后需要xshell来连接远程虚拟机,虚拟机保证要联网,网络畅通。 4.xftp用来向linux传输文件用,一般来说xshell和xftp配套使用 5.对应的压缩...

architect刘源源
今天
29
0
使用 spring 的 IOC 解决程序耦合

工厂模式解耦 在实际开发中我们可以把三层的对象都使用配置文件配置起来,当启动服务器应用加载的时候,让一个类中的方法通过读取配置文件,把这些对象创建出来并存起来。在接下来的使用的时...

骚年锦时
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部