文档章节

十一、select2实现下拉菜单

ssshen
 ssshen
发布于 2017/08/30 11:51
字数 213
阅读 11
收藏 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
基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

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

walb呀
2017/12/04
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

没有更多内容

加载失败,请刷新页面

加载更多

面向对象设计原则(OOP)

单一职责原则(Single responsibility principle)又称单一功能原则。它规定一个类应该只有一个发生变化的原因。 核心原则:低耦合,高内聚。 一个类,应该只有一个引起它变化的原因,也就是...

gackey
43分钟前
2
0
C++ 锁

C++提供了两种常用的锁,std::lock_guard<Lockable &T>和std::unique_lock<Lockable &T>。通常使用场景下,这两个锁用法一致。即,在构造锁对象时上锁,在析构锁对象时解锁。使用户从上锁/解...

yepanl
46分钟前
2
0
Kali Linux Docker 練習

docker pull kalilinux/kali-linux-docker docker run -t -i kalilinux/kali-linux-docker /bin/bash apt-get update apt-get install htop apt-get install nmap apt-get install wpscan ap......

BaiyuanLab
今天
2
0
通俗大白话来理解TCP协议的三次握手和四次分手

最近在恶补计算机网络方面的知识,之前对于TCP的三次握手和四次分手也是模模糊糊,对于其中的细节更是浑然不知,最近看了很多这方面的知识,也在系统的学习计算机网络,加深自己的CS功底,就...

onedotdot
今天
2
0
TiDB 在爱奇艺的应用及实践

爱奇艺,中国高品质视频娱乐服务提供者,2010 年 4 月 22 日正式上线,推崇品质、青春、时尚的品牌内涵如今已深入人心,网罗了全球广大的年轻用户群体,积极推动产品、技术、内容、营销等全方...

TiDB
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部