当前位置：首页 > 前端 >

SELECT 2 —— 替代SELECT 组件的jQuery 插件

时间：2019-12-13 13:49:26浏览：1713 转载

文档地址：

一、简介

select2 是替代select 组件的jQuery 插件，它能给你一个自定义的列表选择组件，自定义支持如搜索、标签、远程数据集、无限滚动等及其它常用的选项。

1、安装

CDN（Content Delivery Network）方式：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

另外还有安装插件方式、本地引用方式。（因为是jQuery 插件，需在之前引入jQuery）

2、基础使用

代码：


<body>
<select class="singleSelect">
	<option>选项一</option>
	<option>选项二</option>
	<option>选项三</option>
</select>
<select class="multiSelect" multiple="multiple">
	<option>选项一</option>
	<option>选项二</option>
	<option>选项三</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
	$('.singleSelect').select2();
	$('.multiSelect').select2();
});
</script>
</body>

二、select2 可选配置

1、配置形式

调用select2 时传入对象即可，如：

$('.myselect').select2({placeholder:"请输入账号"})

2、完整可配置参数

查看文档：https://select2.org/configuration/options-api

在此列举常用几个配置：

allowClear：

boolean，是否可清除已选数据，默认false，设置为true后下拉输入框右侧会多出个小叉用于清除已选数据。

closeOnSelect：

boolean，默认true，选中某个数据项后是否收起下拉框。

multiple：

boolean，是否为多选下拉框，默认false。该值会自动读取select 元素的multiple 属性。

maxmumSelectionLength：

为多选下拉框时最大可选取数，默认为0，小于1 时则没有选取数限制。

placeholder：

提示文本。对于非multiple 的下拉框，第一个option必须为空（如<option></option>），对multiple 下拉框则不需要。

selectionAdapter：

singleSelection|mutipleSelection，取决于select 元素的multiple 属性。

width：

string，渲染的宽度，默认"resolve"。几个可选值：element（从CSS 规则计算元素宽度）、style（从元素的style 属性）、resolve（从可获取的style 属性计算宽度，有必要的话（应该指style为空），返回其它方式计算宽度值）、<value>（有效的CSS 值计算，如width:'50%'）。对最后一个值不太理解，个人觉得最好使用element 或style。如：


<select class="multiSelect" multiple="multiple" style="width:50%">
	<option>选项一</option>
	<option>选项二</option>
	<option>选项三</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiSelect').select2({width:"element"});
});
</script>

theme：

string，classic|..，如果为classic，则使用经典的外观。

templateResult：

回调函数（返回的是html），选项被渲染的方式。

templateSelection：

回调函数（返回的是html），选中的结果被渲染的方式。下面是简单的示例，如果用img 等标签引入图标，效果会更好。

<select class="singleSelect1">
	<option>选项一</option>
	<option>选项二</option>
	<option>选项三</option>
</select>
<select class="singleSelect2">
	<option>选项一</option>
	<option>选项二</option>
	<option>选项三</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
	$('.singleSelect1').select2({templateResult:function(state){return state.text+" - 选项"}});
	$('.singleSelect2').select2({templateSelection:function(state){return state.text+" - 选项"}});
});
</script>

如何去掉 select2 快速搜索框？

在JS里面加上minimumResultsForSearch = -1

上一篇：CSS实现简易步骤
下一篇：不用SDK七牛云上传PHP简单版本

发表评论

昵称：验证码：

关于博主

博主：BlueCode

职业：web程序

简介：2002年开始一直从事Web制作，网站运营，会PHP+MYSQL ASP+MSSQL，微信开发

Linux文章
PHP文章
随机文章

BlueCode的自留地

SELECT 2 —— 替代SELECT 组件的jQuery 插件

关于博主