Select2.js学习总结

最新推荐文章于 2024-03-19 09:38:01 发布
最新推荐文章于 2024-03-19 09:38:01 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： JS_基础 文章标签： select2

本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、按照拼音搜索功能。并通过测试示例对其效果进行了验证。

一、效果图

这里写图片描述 
这里写图片描述 
这里写图片描述

二、 使用方式

1.使用前需要引入下面几个插件： 
select2.css或者select2.min.css 
select2.js或者select2.min.js 
jquery-2.0.3.min.js

<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/jquery-2.0.3.min.js"></script>
  • 1
  • 2
  • 3

2.如果在使用select2单选搜索时想要能够按照拼音字母进行搜索，需要引入pinyin.js插件，并对select2.js源码进行修改。

<script src="../../plugins/pinyin/pinyin.js"></script>
  • 1

select2.js文件修改方式： 
将select2.js文件中下面这部分代码屏蔽掉

var original = stripDiacritics(data.text).toUpperCase();
var term = stripDiacritics(params.term).toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
    return data;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

并在select2.js文件添加以下代码：

//拼音搜索功能
var original = '';
var original1 = '';
var term = stripDiacritics(params.term).toUpperCase();
if(stripDiacritics(data.text).toPinYin != undefined) {
    var result = stripDiacritics(data.text).toPinYin();
    original = result[0].indexOf(stripDiacritics(params.term).toUpperCase());
    original1 = result[1].indexOf(stripDiacritics(params.term).toUpperCase());
    if(original == -1 && original1 == -1) {
        original = stripDiacritics(data.text).toUpperCase().indexOf(term);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

三、常用功能说明

1.常用参数设置含义

tags: true,                             // 根据搜索框创建option，默认false
maximumSelectionLength: 6,              // 最多能够选择的个数
multiple: true,                         // 多选，默认false
data: initdata,                         // 下拉框绑定的数据
allowClear: true,                       // 清空，默认false
placeholder: '请添加或选择语言'            // 占位提示符
maximumInputLength: 20,                 // 允许搜索长度  
minimumResultsForSearch: 20,            // 至少20个结果的时候显示搜索  
minimumResultsForSearch: Infinity,      // 永久隐藏搜索框  
selectOnClose: true,                    // 结果显示高亮  
closeOnSelect: false,                   // select选中关闭下拉框  
separator: ",",                         // 分隔符
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

2.select2事件：

//置空  
$eventSelect.val(null).trigger("change");  
//选中  
$eventSelect.on("selected", function (e) { })  
//移除  
$eventSelect.on("removed", function () { })  
//多个事件  
$eventSelect.on("close removed", function () { })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3.获取value和text

$("#xa").val();  
$("#xa").select2("val");  
$("#xa").select2('data').text ;
  • 1
  • 2
  • 3

四、测试源码示例

1.select2Test.html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>select2</title>
</head>
<body>
    <link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
    <div>
        <label style="width: 100px; font-size: 14px;">单选</label>
        <select id="sel_menu" style="width: 400px;" >
            <option value=""></option>
        </select>
    </div>
    <div style="margin-top:20px;">
        <label style=" width: 100px; font-size: 14px;">多选</label>
        <select id="sel_menu2" multiple="multiple" style="width: 400px;"></select>
    </div>
    <div style="margin-top:20px;">
        <label style="width: 100px; font-size: 14px;">多选(含选中项)</label>
        <select id="sel_menu3" multiple="multiple" style="width: 400px;"></select>
    </div>
    <button onclick=getSelectedData() style ="margin-top: 20px;">多选选中值</button>
    <script src="../../plugins/jquery-2.0.3.min.js"></script>
    <script src="../../plugins/select2/js/select2.js"></script>
    <script src="../../plugins/pinyin/pinyin.js"></script>
    <script src="../../js/select2Test.js"></script>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

2.select2Test.js代码：

//下拉框数据
var initdata = ["Java", "JavaScript", "C++", "C#", "Python", "PHP"];
//选中数据
var selectedData = ["Java", "PHP"];

//初始化页面加载
$(document).ready(function () {

    //初始化select2单选
    initSelect2WithSearch();

    //初始化select2多选（没有选中项）
    initSelect2();

    //初始化select2多选（包含选中项）
    select2WithData(selectedData);
});

/**
 * 初始化select2单选，默认带搜索功能。
 */
function initSelect2WithSearch() {
    $("#sel_menu").select2({
        tags: true,
        placeholder: '请搜索或选择语言',
        data: initdata,
        allowClear: true
    });
}
/**
 * 初始化select2多选（没有选中项）
 */
function initSelect2() {
    $("#sel_menu2").select2({
        tags: true,
        maximumSelectionLength: 5,
        placeholder: '请添加或选择语言',
        multiple: true,
        maximumInputLength: 10,//允许长度  
        data: initdata,
    });
}

/**
 * 初始化select2多选（包含选中项）
 */
function select2WithData(selectedData) {
    $("#sel_menu3").select2({
        tags: true,                          //支持新增，默认为false
        maximumSelectionLength: 6,           //最多能够选择的个数
        multiple: true,                      //支持多选，默认为false
        data: initdata,                      //下拉框绑定的数据
        allowClear: true,                    //支持清空，默认为false
        placeholder: '请添加或选择语言'      //提示语
    }).val(selectedData).trigger('change');  //多选情况下给选中项的赋值
}

/**
 * 获取多选框选中项的值
 */
function getSelectedData() {
    var mulSelData = $("#sel_menu3").val().join(",");//获取多选输入框选中值的方式
    alert("sel_menu3的选中项是：" + mulSelData);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

3.运行结果： 
这里写图片描述

Select2.js使用笔记

构造函数：

2.5.2版本：

参数类型描述
Width字符串控制 宽度 样式属性的Select2容器div
minimumInputLengthint最小数量的字符
maximumInputLengthint最大数量的字符
minimumResultsForSearchInt最小数量的结果
maximumSelectionSizeint可选择的最大条目数
placeholder字符串选择初始值
separator字符串分隔符字符或字符串用来划定id
allowClear布尔此选项只指定占位符
multiple布尔Select2是否允许选择多个值
openOnEnter 打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。
id函数函数用于获取id从选择对象或字符串id存储代表的关键
matcher函数用于确定是否搜索词匹配一个选项时使用一个内置的查询功能
sortResults函数用于排序列表搜索之前显示的结果。
formatSelection函数函数用于呈现当前的选择
formatResult函数函数用来渲染结果,
formatResultCssClass函数函数用于添加css类结果元素
formatNoMatches字符串/函数字符串包含“不匹配”消息,或
  函数用于呈现信息
formatSearching字符串/函数字符串包含“搜索… “消息,或
  函数用于呈现显示的消息 正在进行搜索。
formatAjaxError字符串/函数字符串包含消息“加载失败”,或
  函数用于呈现信息
formatInputTooShort字符串/函数包含“搜索”输入太短消息的字符串,或
  函数用于呈现信息。
formatInputTooLong字符串/函数包含“搜索”输入太短消息的字符串,或
  函数用于呈现信息
formatInputTooLong字符串/函数包含“搜索输入字符串太长”消息,或
  函数用于呈现信息。
formatSelectionTooBig字符串/函数字符串包含“你不能选择任何更多的选择”消息,或
  函数用于呈现信息
formatLoadMore字符串/函数字符串/函数
createSearchChoice函数创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。
createSearchChoicePosition函数/字符串定义的位置插入元素
initSelection函数调用Select2创建允许用户初始化选择的值 select2附加到元素
tokenizer函数记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。
tokenSeparators函数一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [‘,’,’ ‘] 。
query函数函数用于搜索词的查询结果。
ajax对象选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。
data数组/对象择建在查询功能,使用数组。
tags数组/函数将Select2放入“标签’mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。
containerCss函数/对象内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。
containerCssClass函数/字符串Css类将被添加到select2容器的标签。
dropdownCss函数/对象内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。
dropdownCssClass函数/字符串Css类将被添加到select2下拉的容器。
dropdownAutoWidth布尔当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。
adaptContainerCssClass函数过滤器/重命名的css类,因为他们被复制从源标签select2容器标签
adaptDropdownCssClass函数滤器/重命名的css类,因为他们被复制从源标签select2拉标签
escapeMarkup函数函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。
selectOnBlur布尔设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。
loadMorePadding整数定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。
nextSearchTerm函数函数用于确定下一个搜索词应该是什么

Example Code（针对目标元素为 div 例如：<div id="e1">...</div> ）

    $("#e1").select2(); 
    $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
    $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中（好像单个还不行，以数组形式才行）
    $("#el").click(function() { $("#e2").select2("val", ""); });  // 不选中任何值
    $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
    $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
    $("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
    $("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
    $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
    $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
    $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA"，id="MA" 选中
    $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
    $("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });

// 加载数据
$("#e11").select2({
    placeholder: "Select report type",
    allowClear: true,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

});

// 加载数组  支持多选
$("#e11_2").select2({
    createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
    multiple: true,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

});

function log(e) {
    var e=$("<li>"+e+"</li>");
    $("#events_11").append(e);
    e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });

}

// 对元素 进行事件注册
$("#e11")
.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })// 改变事件
.on("select2-opening", function() { log("opening"); })  // select2 打开中事件
.on("select2-open", function() { log("open"); })     // select2 打开事件
.on("select2-close", function() { log("close"); })  // select2 关闭事件
.on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 高亮
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 选中事件
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 移除中事件
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) //移除完毕事件
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})  //加载中事件
.on("select2-focus", function(e) { log ("focus");}) //获得焦点事件
.on("select2-blur", function(e) { log ("blur");});  //失去焦点事件

$("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); });
江湖之笑
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select2.js
07-27
select2.min.js插件！！！=
select2 的使用教程（简）
程序员蒋老湿的博客
08-30 1万+
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。 官网：http://select2.github.io/ 演示： 请选择 由于博客系统的原因，所以只能演示简单
探索Select2：一款强大的JavaScript选择框库
最新发布
gitblog_00034的博客
03-19 237
探索Select2：一款强大的JavaScript选择框库 项目地址:https://gitcode.com/select2/select2 项目简介 Select2 是一个流行的开源项目，它旨在增强并替换HTML <select>元素，提供更为丰富和交互友好的用户体验。这款库不仅提供了搜索功能，还支持多选、分组选项等高级特性，使得在网页中创建复杂而美观的选择框变得更加容易。 技术分析...
使用select2.js实现多功能下拉框,select2中文api
极客神殿
03-03 3163
最近项目中有个需求是商品能够选择多个标签，类似jire中选择标签： 能把选择后选项显示在输入框中，删除时连同整个标签一起删。经过网上咨询、请教同事后，得到一致意见是使用select2。下面是使用select2的初始化、动态赋值，实现标签化多选、以及遇到的问题：1，从http://select2.github.io/examples.html处下载select2源码，把dist目录中css、js引用
JS组件系列——Bootstrap Select2组件使用小结
weixin_34378969的博客
01-05 528
前言：在介绍select组件的时候，博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼，这两个组件的功能确实很强大，只可惜没有图文结合的效果（也就是将图片放入到select里面随着文字一起显示）。前两天做一个菜单图标选择的功能，就要用到这个图文选择的功能。于是乎又是找啊找。终于不负所望，找到了我们伟大的select2组件。今天分享下这个组件的一些用法和特性。...
select2详解
qq_27009517的博客
05-12 7369
官网：http://select2.github.io/select2/ https://select2.org/ 单项选择 默认情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".
js学习总结_选项卡封装(实例讲解)
12-11
这个插件对应的html的结构如下 <li class='select'>页卡一 页卡二 页卡三 <div class='select'> <div>1 <div>2 <div>3 <div>4 内容二 内容三</
js学习总结_轮播图之渐隐渐现版(实例讲解)
12-10
具体代码如下： <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">... -webkit-user-select:none; } ul,li{ list-style } img{ display: block; border:none; }
Ext Js权威指南(.zip.001
09-26
1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用json / 8 1.2.6　在java中使用...
Java学习笔记-个人整理的
12-19
{12.11.2}intersect与minus}{166}{subsection.12.11.2} {12.11.3}join}{166}{subsection.12.11.3} {12.11.3.1}cross join}{166}{subsubsection.12.11.3.1} {12.11.3.2}inner join}{167}{subsubsection.12.11.3.2...
图库新版jQuery焦点图 JS代码
06-05
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script>") } if (code=="gg300x250_1"){//85849 GOOGLE document.write('...
select2.min.js
02-02
select2.min.js
select2的简单使用
热门推荐
qq_35614955的博客
05-18 1万+
因为项目中需要关联用户，且数据比较多，为了便捷操作，以及防止重名，需要能搜索的下拉框，使用了select2来完成这个功能。使用select2的方式与问题 引入 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/
前端下拉框select标签的插件——select2.js
Gorden的博客
11-30 1881
select2.js插件
前端插件之Select2使用
weixin_30458043的博客
07-30 523
工欲善其事，必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件，上一篇文章介绍了bootstrap-duallistbox这个插件的使用，这一篇开始Select2的征服之旅 Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等众多好用的功能 项目地址：https://selec...
用js控制select2组件，改变所选值
ZhiMaHuyizhi的博客
05-09 369
【代码】用js控制select2组件，改变所选值。
select2.js插件新增支持拼音搜索
qq_41320860的博客
09-28 7687
select2.js插件新增支持拼音检索 若依框架
javascript 入门 之select2功能大全
愿你饱经冷暖，仍保纯真
08-02 1354
1.代码较为简单，不作太多讲解，新建一个javascript工程，在index.htl中编写如下代码，根据&lt;link&gt;和&lt;script&gt;标签配制好js和css库便可！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;met
Select2插件使用总结
banjw的博客
08-01 771
引入select2插件 &amp;lt;link href=&quot;${request.contextPath}/res/skin/select2-4.0.2/css/select2.min.css&quot; rel=&quot;stylesheet&quot;&amp;gt; &amp;lt;script src=&quot;${request.contextPath}/res/skin/select2-4.0.2/js/select
selectpicker.js
07-13
要使用 `selectpicker.js`，首先你需要确保已经引入了 jQuery 和 Bootstrap 的相关文件。然后，你可以按照以下步骤来集成 `selectpicker.js`： 1. 在 HTML 文件中引入所需的 CSS 和 JavaScript 文件： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值