select2用法总结

最新推荐文章于 2021-08-30 10:56:40 发布
最新推荐文章于 2021-08-30 10:56:40 发布
阅读量4k 收藏 3
点赞数
分类专栏： jQuery Bootstrap

Select2是什么

Select2是一款可以对HTML的<select>标签进行功能优化的jQuery插件,支持对列表进行检索,从远程数据源获取列表项等各种功能.

官网文档在此:https://select2.github.io

代码示例

示例1.从数组中获取列表项且支持搜索

前端代码:


<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

</head>
<body>

<select id="select2_sample" name="sample" style="width:75%" ></select>

</body>

<script>
    $(document).ready(function(){

        var data = [{id: 0, text: 'apple'}, {id: 1, text: 'banana'}, {id: 2, text: 'pear'}];//下拉列表中的数据项

        $("#select2_sample").select2({
            data: data
        });//启动select2

    });
</script>
示例2.从服务器(API)异步获取列表项且支持搜索

前端代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

</head>
<body>

<select id="select2_sample" name="sample" style="width:75%" >
    <option value="100" selected="selected">默认项</option>
</select>

</body>

<script>
    $(document).ready(function(){

        $("#select2_sample").select2({
            ajax: {

                url     : "http://123.57.28.146:8088/sample",//请求的API地址
                dataType: 'json',//数据类型
                data    : function(params){

                    return {
                        q   : params.term//此处是最终传递给API的参数
                    }
                },
                results : function(data){ return data;}//返回的结果

            }
        });//启动select2

    });
</script>

API代码(基于Laravel 5.0)

public function sample()
    {
        $results = [];
        $input       = Input::get('q');

        if($input == 'A'){
            
            $results[] = array("id"=>"1","text"=>"apple");
            $results[] = array("id"=>"2","text"=>"apache");
        }
        if($input == 'B'){

            $results[] = array("id"=>"1","text"=>"banana");
            $results[] = array("id"=>"2","text"=>"bro");
        }
        if($input == 'C'){

            $results[] = array("id"=>"1","text"=>"CL");
            $results[] = array("id"=>"2","text"=>"COOL");
        }

        return array('results' => $results);

    }
示例3.从服务器(API)异步获取列表项且支持图片显示

前端代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

    <style>
        .img-car{

            height:20px;
            width:30px;
        }
    </style>

</head>
<body>

<select id="select2_sample" name="sample" style="width:75%" >
    <option value="100" selected="selected">默认项</option>
</select>

</body>

<script>
    $(document).ready(function(){

        function formatState (state) {

            if (!state.id) { return state.text; }//未找到结果时直接跳出函数
            var $state = $(
                    '<span><img src="http://ocv7z9x4r.bkt.clouddn.com/car_logo_' + state.text + '.jpg" class="img-car" />' + state.text + '</span>'
            );//将API返回的结果转换为模板
            return $state;
        }

        $("#select2_sample").select2({

            ajax: {

                url     : "http://123.57.28.146:8088/sample",//请求的API地址
                dataType: 'json',//数据类型
                data    : function(params){

                    return {
                        q   : params.term//此处是最终传递给API的参数
                    }
                },
                results : function(data){ return data;}//返回的结果

            },
            templateResult: formatState//模板化
        });//启动select2

    });
</script>

API代码(基于Laravel 5.0)

public function sample()
    {
        $results = [];
        $input       = Input::get('q');

        if($input == 'CAR'){

            $results[] = array("id"=>"1","text"=>"benz");
            $results[] = array("id"=>"2","text"=>"bmw");
            $results[] = array("id"=>"2","text"=>"audi");
        }

        return array('results' => $results);

    }

效果图:

示例4.为Select2设置各种参数
参数名称 参数用途
delay 默认情况下,Select2会在用户改变搜索内容时立即触发AJAX请求。使用delay参数后,Select会在用户完成输入后,等待delay参数设置的毫秒之后才触发AJAX请求
minimumInputLength 用于设置用户需要输入的最小字母数,小于该字母数时Select2不会触发AJAX请求
maximumInputLength 用于设置用户需要输入的最大字母数,大于该字母数时Select2不会触发AJAX请求

示例代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

    <style>
        .img-car{

            height:20px;
            width:30px;
        }
    </style>

</head>
<body>

<label for="select2_sample">
    GeekZhou.com
    <select id="select2_sample" name="sample" style="width:75%" >
    </select>
</label>

</body>

<script>
    $(document).ready(function(){

        function formatState (state) {

            if (!state.id) { return state.text; }//未找到结果时直接跳出函数
            var $state = $(
                    '<span><img src="http://ocv7z9x4r.bkt.clouddn.com/car_logo_' + state.text + '.jpg" class="img-car" />' + state.text + '</span>'
            );//将API返回的结果转换为模板
            return $state;
        }

        $("#select2_sample").select2({

            minimumInputLength: 2,
            maximumInputLength: 5,
            ajax: {

                delay   : 500,
                url     : "http://123.57.28.146:8088/sample",//请求的API地址
                dataType: 'json',//数据类型
                data    : function(params){

                    return {
                        q   : params.term,//此处是最终传递给API的参数
                    }
                },
                results : function(data){ return data;}//返回的结果

            },
            templateResult: formatState//模板化
        });//启动select2

原文地址：https://segmentfault.com/a/1190000006792406?_ea=1131053



ywb201314
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
select2自定义标签 + 按钮
weixin_43842590的博客
01-08 2322
 需求：如图一所示，点击按钮时，下面的下拉框添加一个标签，当下面有该标签时，再点击消失。下拉框还能输入自定义标签，但要求只有一个自定义标签。  首先，支持添加自定义标签 var option={tags:true}  当然创建默认是enter键 也可自行设置支持逗号与空格 var option={tokenSeparators ：[ '，' ，'' ]}  要求只有一个自定义标...
Select2.js下拉框使用小结
01-19
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要...
BootStrap与Select2使用小结
12-09
这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。 组件的下载地址以及API说明地址： 1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/ 2、Select2参数文档说明：https://select2.github.io/options.html 3、Select2源码：https://github.com/select2/select2 效果图： HTML代码： @{ Layout = "~/Views/Shared
select2基本用法
好好学习
11-22 611
1.介绍select2 是一个可定制的复选框，支持查询，标签，远程的数据集，无线滚动和许多其他更高的使用选项。2.官网http://select2.github.io/   3.基本使用   a.引入基本样式     &lt;script src="select2/select2.min.js"&gt;&lt;/script&gt;     &lt;link href="select...
select2 的使用教程（简）
程序员蒋老湿的博客
08-30 1万+
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。 官网：http://select2.github.io/ 演示： 请选择 由于博客系统的原因，所以只能演示简单
select2使用
fly_on_the_sky的博客
07-26 4980
烟火_ select2使用 一、简介 　　select2是Jquery用来代替选择框的一种组件。它让你可以定制下拉框，并且支持搜索、标记，远程数据源，无限滚动和其他更高级的功能。select2的下载地址为：https://select2.github.io/ 。这里使用到的是select2-4.0.0版本。下载该版本后，解压文件，在dist目录下有js与css文件。使用select就需要引用这...
select标签操作 select2使用详解
08-12 337
select标签操作 select2使用详解 官网：https://select2.github.io/examples.html 引用: <link href="~/Scripts/select2/select2.css" rel="style...
select2标签赋值
shitongshuo的博客
11-13 590
$("#id").select2(‘val’, $("#id2").val()); $("#id").html('id ').trigger(“change”);
select2 属性标签整理
weixin_30387663的博客
12-20 318
前言：由于自己感觉自己学的越来越杂，很多东西使用之后就忘掉了很大一部分，所以最近决定把自己学的东西通过博客的方式整理出来，看能不能把这些知识都串通起来 SELECT2 标签 简单的关于以下API地址的翻译 API地址 https://select2.github.io/examples.html select2标签和传统的select标签好像没有多大的差别,但是它还是在s...
前端插件之 Select2 介绍及使用
smile radiantly
07-16 2313
官方网站：Select2 Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等众多好用的功能 项目地址：select2.org/ 基本使用 需要用到的JS和CSS文件位于项目代码下的dist目录中，需要将这个目录中的对应文件放入你的项目里，这一步不赘述 引入CSS/JS文件，由于Select2是基于Jquery的，所以要先引入Jquery，这里我们都直接引入CDN的地址 <!-- 加载 Jquery -->
bootstrap select2使用总结
11-08
select2的几种常用方法总结，把代码放到相应的地方就能使用了。不过前提需要下载select2哦！
JQuery插件Select2详解
xinliucs的博客
08-23 8570
JQuery插件Select2详解 Select2是一款JQuery的下拉表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等功能。 配置CSS/JS文件 在项目里直接引入CDN的地址就可以了 <!-- 加载 Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- 加载 Select2 --> <li
Select2的使用 联动筛选框的一个例子
cc_fys的博客
05-14 3815
本文使用的select2版本为select2 4.0.2  数据库中的表格信息如下，month字段包含了年、月信息。使用select2插件作为筛选框,以年度和月份信息筛选表格数据。年度和月份这两个筛选框作为联动的筛选框。HTML 筛选框部分 &lt;span class="c_lable" &gt;年度&lt;/span&gt; &lt;select id="se...
select2使用经验总结
Chialin的博客
03-05 756
select2 版本：Select2 4.0.6-rc.1 本人新手，初次使用select2组件，遇到很多难题，记录下来帮助其他新手。 <select id="selectID"></select> 问题1：如何获取select2已选择的数值？ 答案： $('#selectID').select2('data'); 问题2：如何给select2赋...
select2 使用教程（简）
热门推荐
程序员蒋老湿的博客
11-10 8万+
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。 官网：http://select2.github.io/ 演示： 请选择 由于博客系统的原因，所以只能演示简单
jquery 下拉框 select2 运用 笔记
weixin_30493401的博客
11-30 302
1,添加select2 样式 参考（https://select2.org/ ） 2,Html: <select id="txtType" name="Type" class="form-control select2" multiple="multiple"> </select> 3,jquery @section scripts{ $(docum...
select2插件 多选下拉框和设置大标题
陈劲松的博客
12-04 6420
先上个图 项目需要一个支持多选的选人功能，并能区别开不同身份的人。 网上搜了一番发现select2简单又好用，但是找不到设置大标题的方法。后来看了官方英文文档找到了。 直接上代码吧 1. 定义select标签，设置好id： 主讲人： * 会议秘书： *
select2多选设置select多选，select2取值和赋值
稳哥的小灶
11-05 7万+
select2设置select多选，select2取值和赋值,作为筛选条件的时候，取值相对简单，把选中的id值转为字符串传给后端查询，查询之后会刷新页面，为了在下拉框中显示刚刚选中的值，就需要给select赋值，可以将刚才传给后端的字符串再传回前端，然后转为一位数组，再赋值给select2就会显示刚刚选中的值，赋值方法：$('#id').val(arr).trigger('change')，id为...
select2使用教程
最新发布
03-29
Select2是一种基于jQuery库的下拉选择框，可以帮助你更快捷、更方便地处理复杂的下拉列表。在这里，我们将提供一个简单的使用教程，帮助您快速上手Select2。 1. 下载和引用Select2 首先，您需要从官方网站下载Select2插件。下载完成后，在您的HTML页面中引用Select2的CSS和JS文件： ```html <link href="select2.min.css" rel="stylesheet" /> <script src="jquery.min.js"></script> <script src="select2.min.js"></script> ``` 2. 创建下拉框 在你的HTML文件中，你需要创建一个下拉框元素： ```html <select id="mySelect"></select> ``` 3. 初始化Select2 初始化Select2非常简单，只需在您的JavaScript文件中添加以下代码： ```javascript $(document).ready(function() { $('#mySelect').select2(); }); ``` 现在你的Select2下拉框已经准备好了！但是它还是空的，接下来我们将介绍如何使用Select2来添加选项。 4. 添加选项 添加选项非常简单，只需在下拉框中添加option元素即可。例如： ```html <select id="mySelect"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 但是，如果您有大量的选项，手动添加它们会变得非常繁琐。在这种情况下，您可以使用Select2提供的AJAX加载选项的功能。我们将在下一步中介绍这个功能。 5. AJAX加载选项 使用AJAX加载选项，可以从服务器动态获取选项并将它们添加到Select2下拉框中。以下是一个简单的AJAX示例： ```javascript $(document).ready(function() { $('#mySelect').select2({ ajax: { url: 'http://example.com/api/options', dataType: 'json', processResults: function(data) { return { results: data }; } } }); }); ``` 在这个例子中，我们向Select2提供了一个AJAX请求的URL，并指定了响应数据的类型（JSON）。processResults函数用于处理服务器响应，并将结果返回给Select2。 6. 高级Select2 Select2插件还提供了许多高级功能，例如： - 主题 - 使用不同的主题来定制您的Select2下拉框 - 事件 - 使用事件来响应用户的行为，例如选中选项或打开下拉框 - 模板 - 使用模板来自定义选项的外观和行为 您可以在官方文档中了解更多关于这些高级功能的信息。 总结 在本教程中，我们介绍了如何使用Select2插件创建和自定义下拉框。我们介绍了如何添加选项，使用AJAX加载选项，并提供了一些高级功能的概述。希望这个教程能够帮助您更好地理解和使用Select2。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值