当前位置:首页 > 前端 >

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

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

文档地址:

https://select2.org/


一、简介

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,微信开发