文档章节

十一、select2实现下拉菜单

ssshen
 ssshen
发布于 2017/08/30 11:51
字数 213
阅读 11
收藏 0
点赞 0
评论 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
粉丝 1
博文 32
码字总数 11112
作品 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
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
基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

在基于Metronic的Bootstrap开发框架中,一直都希望整合较新、较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个版本的内容...

walb呀
2017/12/04
0
0
转:Bootstrap3.0教程

第一部分:Bootstrap介绍 1.Bootstrap学习从现在开始 http://www.cnblogs.com/aehyok/p/3381651.html 2.Bootstrap3.0学习第一轮(入门) http://www.cnblogs.com/aehyok/p/3398359.html 第二部......

子弹兄
2014/08/22
0
2
后台页面使用select2快速选中目标

业务场景:在后台页面中,我们可能创建了很多的标签,而如果要筛选出某个标签下面的所有的文章的话,我们必须先选中这个标签,但是要在成百上千的标签云中选中一个标签何其难。下面我们就介绍...

彩虹的夜晚
2017/11/20
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/06/12
8
0
select2 使用

参考文档: http://blog.csdn.net/u014388408/article/details/50587405 官网:http://select2.github.io/ 官网文档:http://select2.github.io/select2/select2-latest.html 例子: Select......

Canaan_
2017/03/24
22
0
Laravel 5:多对多,实现文章和tags

原文来自 https://laravist.com/article/18 Laravist 是我刚刚上线的Laravel社区,有任何与Laravel相关的问题可以到这里来问我,我会尽力去帮大家解决问题,后期会尝试录制一些视频教程,形式...

mdoo
2015/10/10
813
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kafka设计解析(一)- Kafka背景及架构介绍

原创文章,转载请务必将下面这段话置于文章开头处。(已授权InfoQ中文站发布) 本文转发自技术世界,原文链接 http://www.jasongj.com/2015/03/10/KafkaColumn1 摘要   Kafka是由LinkedI...

mskk
5分钟前
0
0
使用Service Mesh整合您的微服务架构

在微服务架构的世界中,它正在达到这样的程度,即管理系统的复杂性对于利用它带来的好处变得至关重要。 目前,如何实现这些微服务不再是一个问题,因为有很多可用的框架(Spring Boot,Vert....

xiaomin0322
8分钟前
0
0
看看 LinkedList Java 9

终于迎来了 LinkedList 类,实现的接口就有点多了 Serializable, Cloneable, Iterable<E>, Collection<E>, Deque<E>, List<E>, Queue<E>。LinkedList是一个实现了List接口和Deque接口的双端链......

woshixin
27分钟前
0
0
算法 - 冒泡排序 C++

大家好,我是ChungZH。今天我给大家讲一下最基础的排序算法:冒泡排序(BubbleSort)。 冒泡排序算法的原理如下: 比较相邻的元素。如果第一个比第二个大(可以相反),就交换他们两个。 对每...

ChungZH
30分钟前
0
0
jquery ajax request payload和fromData请求方式

请求头的不同 fromData var data = { name : 'yiifaa'};// 提交数据$.ajax('app/', { method:'POST', // 将数据编码为表单模式 contentType:'application/x-ww...

lsy999
32分钟前
0
0
阿里P7架构师,带你点亮程序员蜕变之路

前言: Java是现阶段中国互联网公司中,覆盖度最广的研发语言。 掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,成为Java架...

Java大蜗牛
33分钟前
1
0
Ecstore 在没有后台管理界面(维护)的情况如何更新表的字段

window 系统: 切换到:app\base 目录下: C:\Users\qimh>d: D:\>cd D:\WWW\huaqh\app\base 执行:D:\WWW\huaqh\app\base>cmd update linux 系统: 1># cd /alidata/www.novoeshop.com/app/......

qimh
38分钟前
0
0
设计模式-策略模式

策略模式 解释 对工厂模式的再次封装,使用参数控制上下文信息(将工厂返回的实例赋值给context field) 不会返回bean实例,只是设置对应的条件 调用context的方法(调用field的方法) 用户只...

郭里奥
41分钟前
0
0
python使用有序字典

python自带的collections包中有很多有用的数据结构可供使用,其中有个叫OrderedDict类,它可以在使用的时候记录元素插入顺序,在遍历使用的时候就可以按照原顺序遍历。 a = {"a":1,"b"...

芝麻糖人
今天
0
0
RestTemplate HttpMessageConverter

RestTemplate 微信接口 text/plain HttpMessageConverter

微小宝
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部