SELECT2 说明
介绍:
select是一个优化下拉框select的jQuery插件,它支持搜索(搜索选择)、远程数据集、以及无限滚动的结果。最近的还支持下拉分组,下拉标签。同时,提供了很多相关的方法,比如获取下拉选项值val,下拉选项ID,下拉选项jQuery对象节点等。
使用:
因为是jQuery插件,必须引入jQuery插件,select2的样式文件、插件Select2的脚本。
样式和脚本引用:
<link rel="stylesheet" href="css/select2.css" />——样式文件
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>——jQuery文件
<script src="js/select2.min.js"></script>——插件脚本文件
<script src='js/select2_locale_zh-CN.js'></script>——提示的中文版本
HTML代码:
<select id="selectDom" name="selectDom">
<option id="down1">下拉选项1</option>
<option id="down1">下拉选项1</option>
<option id="down1">下拉选项1</option>
</select>
JS使用:
$(function(){
$("#selectDom").select2();
});
支持多选:
<select id="selectDom1" name="selectDom1" multiple="multiple">
<option id="down1">多选项1</option>
<option id="down2">多选项2</option>
<option id="down3">多选项3</option>
<option id="down4">多选项4</option>
</select>
可以得到如下选择的项:
效果:
占位符的文字是“select a state"
HTML代码:
<option id="selectDom3" name="selectDom3">
<option></option>
<option>占位符选项1</option>
<option>占位符选项2</option>
<option>占位符选项3</option>
</option>
JS代码:
$(function(){
$("#selectDom3").select2({
placeholder:"请选择一个内容",——定义占位文字内容
allowClear:true——是否允许清空选项
});
});
此外还可以直接在HTML代码中使用data-placeholder="xxx",来定义占位文字内容,例如:
<select data-placeholder="请选择一个内容" id="selectDom3" name="selectDom3">....</option>
PS:需要注意的是,这里必须在选项的头部,定义一个空的<option></option>,如上面HTML代码红色标注的部分。
快速检索:
通过在下拉出现的文本框中输入选项的一个或多个字符,找出相关的下拉选项
效果:
我在检索框中输入天津,下拉列表就会列出所有包涵”天津“字符的下拉选项
HTML代码:
<select id="selectDom4" name="selectDom4" >
<option id="al" data-foo="fooal" value="al">福建省</option>
<option id="bai" data-foo="foobai" value="bai">天津市</option>
<option id="bai" data-foo="foobai" value="bai">天津分局一</option>
<option id="bai" data-foo="foobai" value="bai">天津分局二</option>
<option id="bai" data-foo="foobai" value="bai">天津分局三</option>
</select>
JS代码:
$(function(){
$("#selectDom4").select2({
minimumInputLength:2 ——至少输入两个字符,才能完成检索
});
});
替换下拉项的样式:
例如可以为下拉项添加图片:
这里说明一下为什么可以这样,是因为,这个下拉框是select2使用 ul、li模拟出来的,所以下拉选项中可以放置图片。
JS代码:
$(function(){
function format(state){
if(!state.id) return state.text;//如果选项不存在ID,就是下拉的组节点optgroup
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
//format会遍历执行,state表示每个下拉选项,可以通过state.element获取当前选项的HTML对象
$("#selectDom").select2({
formatResult: format, //使用函数format,格式化下拉选项的结构
formatSelection: format, //使用函数format,重新渲染定义下拉选项的内容
escapeMarkup: function(m) { return m; } //转义重新渲染的下拉选项,防止脚本注入
});
});
使用数组定义下拉选项的内容:
下拉选项的每一个下拉选项都必须有一个ID和TEXT属性,例如下面一个下拉列表的数组数据:
var data=[
{id:1,text:'text01'},
{id:2,text:'text02'},
{id:3,text:'text03'},
{id:4,text:'text04'},
]
使用:
$(function(){
$("#selectDom").select2({
data:data
});
});
当然,你也不一定必须使用id和text来定义,我们通过一个函数,修改数据的格式,例如
function format(item){
return item.tag;
}
就可以使用tag来替代text属性,然后初始化:
$("#selectDom").select2({
data:{results:data,text:'tag'},
formatSelection:format,
formatResult:format
});
也可以如下的写法:
$("#selectDom").select2({
data:{results:data,text:function(item){ return item.tag }},
formatSelection:format,
formatResult:format
});
$("#e10_4").select2({
data:function() { return { text:'tag', results: data }; },
formatSelection: format,
formatResult: format
});
使用ajax载入远程数据:
正在理解
无限滚动的下拉数据列表:
正在理解
Select2的属性列表:
width_字符串
minimumInputLength_
maximumInputLength_
minimumResultsForSearch_
maximumSelectionSize_
placeholder_
placeholderOption_
separator_
allowClear_
multiple_
closeOnSelect_
openOnEnter_
id_function
matcher_function
sortResults_function
formatSelection_function
formatResult_function
formatResultCssClass_function
formatNoMatches_string
formatSearching_string/function
formatAjaxError_string/function
formatInputTooShort_string/function
formatInputTooLong_string/function
formatSelectionTooBig_string/function
formatLoadMore_string/function
createSearchChoice_function
createSearchChoicePosition_string/function
....
ajax
Select2的事件列表:
change——修改下拉选项的时候
select2-opening——在展开下拉列表之前
select2-open——在下拉列表展开之后
select2-close——在下拉礼拜收起之后
select2-highlight——对下拉选项高光选项的操作
select2-selecting——
select2-clearing——清空选项之后
select2-removing——
select2-removed
select2-loaded——下拉的内容更新的时候,更新完成
select2-focus——下拉选项聚焦
select2-blur——下拉选项失去焦点