具体参数可以参考一下:

参数

类型

描述

Width

字符串

控制 宽度 样式属性的Select2容器div

minimumInputLength

int

最小数量的字符

maximumInputLength

int

最大数量的字符

minimumResultsForSearch

Int

最小数量的结果

maximumSelectionSize

int

可选择的最大条目数

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> )

  1. $("#e1").select2();
  2. $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
  3. $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中(好像单个还不行,以数组形式才行)
  4. $("#el").click(function() { $("#e2").select2("val", ""); });  // 不选中任何值
  5. $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
  6. $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
  7. $("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
  8. $("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
  9. $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
  10. $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
  11. $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA",id="MA" 选中
  12. $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
  13. $("#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"); });

官网文档地址是:http://select2.github.io/select2/#documentation。说再多也没用,最后我们来个实例来证明一下ajax请求远程数据,以截图为准:
 
 

select2 api参数的文档的更多相关文章

  1. select2 api参数中文文档

    select2 api参数的文档   具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数 ...

  2. 【开源】.Net Api开放接口文档网站

    开源地址:http://git.oschina.net/chejiangyi/ApiView 开源QQ群: .net 开源基础服务  238543768 ApiView .net api的接口文档查看 ...

  3. 源生API解析XML文档与dom4j解析XML文档

    一.XML语言 XML是一种可扩展的标记语言,是一种强类型的语言,类似HTML(超文本标记语言,是一种弱类型的语言).XML是一种通用的数据交换格式(关系型数据库),综上所诉:XML可以传输数据,也可 ...

  4. Effective Java 第三版——56. 为所有已公开的API元素编写文档注释

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  5. asp.net core web api 生成 swagger 文档

    asp.net core web api 生成 swagger 文档 Intro 在前后端分离的开发模式下,文档就显得比较重要,哪个接口要传哪些参数,如果一两个接口还好,口头上直接沟通好就可以了,如果 ...

  6. Java | Spring Boot Swagger2 集成REST ful API 生成接口文档

      Spring Boot Swagger2 集成REST ful API 生成接口文档 原文 简介 由于Spring Boot 的特性,用来开发 REST ful 变得非常容易,并且结合 Swagg ...

  7. 关于ASP.NET Web Api的HelpPage文档注释问题

    关于ASP.NET Web Api的HelpPage文档注释问题 以前我用微软的HelpPage来自动生成的webAPI帮助文档.在使用了一段时间后发现只能显示Controller上面写的注释文档内容 ...

  8. 使用swagger作为restful api的doc文档生成

    初衷 记得以前写接口,写完后会整理一份API接口文档,而文档的格式如果没有具体要求的话,最终展示的文档则完全决定于开发者的心情.也许多点,也许少点.甚至,接口总是需要适应新需求的,修改了,增加了,这份 ...

  9. ASP.NET Core 中文文档 第二章 指南 (09) 使用 Swagger 生成 ASP.NET Web API 在线帮助测试文档

    原文:ASP.NET Web API Help Pages using Swagger 作者:Shayne Boyer 翻译:谢炀(kiler) 翻译:许登洋(Seay) 对于开发人员来说,构建一个消 ...

随机推荐

  1. QTP自动化测试-打开运行报告

    automation菜单下-点击 result

  2. input按钮使用方法

  3. python基础5 字典

    一.字典 字典是python的基础数据类型之一:字典可以存储大量的数据,关系型数据. 同样他也是python中唯一的映射类的数据类型. 数据类型的分类: 可变的(不可哈希)数据类型:list,dict ...

  4. 量化交易之下单函数和context对象

    一.下单函数 聚宽设计的函数(如前文所说准确叫法是API)的用法都写在API文档里,位置在聚宽网站导航栏-帮助-API文档 1.order按股数下单 order(security, amount, s ...

  5. SpringCloud实践引入注册中心+配置中心

    随着服务数量的增多,尤其是多数项目涉及jni本地方法的调用,所需参数配置较多,同时内存溢出等维护问题时常发生.鉴于此,原tomcat集群的使用已难满足需求,而微服务的思想契合当前项目实践,特在服务端构 ...

  6. [十二省联考2019]异或粽子——可持久化trie树+堆

    题目链接: [十二省联考2019]异或粽子 求前$k$大异或区间,可以发现$k$比较小,我们考虑找出每个区间. 为了快速得到一个区间的异或和,将原序列做前缀异或和. 对于每个点作为右端点时,我们维护出 ...

  7. pymongo 操作

    python 操作 mongoDB 模块 pymongo 安装方法 sudo pip3 install pymongo 操作步骤 1. 创建数据库连接对象 conn = pymonge.MomgoCl ...

  8. adb调试

    adb usb调试,adb网络调试是非常实用的工具,通过电脑连接手机达到文件传输.电脑端安装app刷机等功能材料: 材料: 1.电脑端安装号对应手机的驱动程序 2.电脑端下载好adb调试工具 3.手机 ...

  9. Codeforces 1037C Equalize

    原题 题目大意: 给你两个长度都为\(n\)的的\(01\)串\(a,b\),现在你可以对\(a\)串进行如下两种操作: 1.交换位置\(i\)和位置\(j\),代价为\(|i-j|\) 2.反转位置 ...

  10. ZooKeeper-API CURD

    ZooKeeper Java API pom.xml 依赖 <?xml version="1.0" encoding="UTF-8"?> <p ...