jQuery-select2官⽅⽂档笔记（⼀）——基础应⽤⽂章⽬录
⼀、上⼿
1. CDN
<link href="cdnjs.cloudflare/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"rel="stylesheet"/>
<script type="text/javascript"src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
2. 单选select
$('.js-example-basic-single').select2();
3. 多选select
（1）select标签上添加multiple="multiple"属性
（2）召唤select2⽅法
$('.js-example-basic-multiple').select2();
4. 禁⽤状态
⽅法1：html中设置<select>的disabled的属性为true
⽅法2：$(".js-example-disabled").prop("disabled", true);
5. 宽度（width）
可取值：
Value Description
'element'Uses the computed element width from any applicable CSS rules.
'style'Width is determined from the select element’s style attribute. If no style attribute is found, null is returned as
the width.
'resolve'Uses the style attribute value if available, falling back to the computed element with as necessary.
'<value>'（具体数
值）
Valid CSS values can be passed as a string (e.g. width: ‘80%’).
6. 关于选项（Options）
禁⽤单个选项的⽅法：在<option>标签上添加disabled="disabled"
<select class="js-example-disabled-results">
<option value="one">First</option>
<option value="two"disabled="disabled">Second (disabled)</option>
<option value="three">Third</option>
</select>
7. Placeholders
$(".js-example-placeholder-single").select2({
placeholder:"Select a state"
});
注意： 对于单选来说，必须在select的第⼀个位置设置⼀个空的option选项，placeholder才会起作⽤，否则浏览器会去选择第⼀个值。⽽多选是不能有空的option的。
Alternatively：the value of the placeholder option can be a data object representing a default selection.
$('select').select2({
placeholder:{
id:'-1',// the value of the option
text:'Select an option'
}
});
⼆、Data Sources
1. select2数据源格式要求
数据源由⼀个json对象表⽰；
具体的数据为⼀个key为results的对象数组，每⼀个对象必须⾄少包括id和text；
pagination表⽰分页相关的设置；
{
"results":[
{
"id":1,
"text":"Option 1"
},
{
"id":2,
"text":"Option 2"
}
],
"pagination":{
"more":true
}
}
2. 在数据源中标明预选中("selected": true)和禁⽤状态("disabled": true)
{
"results":[
{
"id":1,
"text":"Option 1"
},
{
"id":2,
"text":"Option 2",
"selected":true
},
{
"id":3,
"text":"Option 3",
"disabled":true
}
]
}
3. 把数据转换为要求的格式
select2必须要求有id和text属性，如果你在服务端⽆法做到包含id，或者API⽆法改变的情况下，你可以在把data传给select2之前做如下转换：
id：
var data = $.map(yourArrayData,function(obj){
obj.id = obj.id || obj.pk;// replace pk with your identifier
return obj;
});
text：
var data = $.map(yourArrayData,function(obj){
< = || obj.name;// replace name with the property used for the text
return obj;
});
4. 分组数据
每个组⽤children key来表⽰，组名⽤text property表⽰：
{
"results":[
{
"text":"Group 1",
"children":[
{
"id":1,
"text":"Option 1.1"
},
{
"id":2,
"text":"Option 1.2"
}
]
},
{
"text":"Group 2",
"children":[
{
"id":3,
"text":"Option 2.1"
},
{
"id":4,
"text":"Option 2.2"
}
]
}
],
"paginate":{
"more":true
}
}
5.
详见本博客另⼀篇博⽂：
6. local Arrays数据源
var data =[
{
id:0,
text:'enhancement'
},
{
id:1,
text:'bug'
},
{
id:2,
text:'duplicate'
},
{
id:3,
text:'invalid'
},
{
id:4,
text:'wontfix'
}
];
$(".js-example-data-array").select2({
data: data
})
三、下拉框中列表的样式和⾏为（Dropdown）
1. ⾃定义样式
可以通过templateResult 选项来设置下拉框显⽰的样式：
function formatState(state){
if(!state.id){
;
}
var baseUrl ="/user/pages/images/flags";
var $state =$(
'<span><img src="'+ baseUrl +'/'+ state.LowerCase()+'.png" class="img-flag" /> '+ +'</span>'
);
return $state;
};
$(".js-example-templating").select2({
templateResult: formatState
});
默认情况下，认为templateResult⽅法返回是纯字符串，会经过escapeMarkup⽅法去除html标记。如果需要⽤到返回的html标签，必须把templateResult⽅法返回的结包含在⼀个jquery对象中【】。
2. 设置选择后不⾃动关闭列表
默认情况下，选择⼀项后，dropdown会⾃动关闭，通过如下设置可强制选择后不⾃动关闭列表，注意只对multiple select起作⽤。
$('#mySelect2').select2({
closeOnSelect:false
});
3. select2 append的位置
默认情况下，select2会attach到body的结尾，并绝对定位，The dropdownParent option allows you to pick an alternative element for the dropdown to be appended to:
$('#mySelect2').select2({
dropdownParent:$('#myModal')
});
select2的下拉列表在BootStrap的modal中显⽰有问题的说明：
解决办法如上。
4. 使⽤templateSelection⾃定义列表样式
前⾯【⼆.5】ajax远程数据中说明过可以对ajax请求回来的数据进⾏⾃定义样式。
其实可以对数据源（html中、array、ajax）的数据⾃定义显⽰样式。
使⽤templateSelection⾃定义列表样式：
function formatState(state){
if(!state.id){
;
}
var baseUrl ="/user/pages/images/flags";
var $state =$(
'<span><img src="'+ baseUrl +'/'+ state.LowerCase()+'.png" class="img-flag" /> '+ +'</span>' );
return $state;
};
$(".js-example-templating").select2({
templateSelection: formatState
});
5. 多选列表限制选择个数（maximumSelectionLength）
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength:2
});
6. 快速清空已选项（allowClear）
设置allowClear为true，将会在select后加⼀个X号，可⽤于快速清空已选项。
$('select').select2({
allowClear:true
});
7. 可选同时允许⽤户⾃⾏输⼊（tags）
bootstrap检验方法同时适⽤于单选和多选的情况：
$(".js-example-tags").select2({
tags:true
});
通过createTag ⽅法可给新增加的tags添加额外的属性：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。