1.代码较为简单，不作太多讲解，新建一个javascript工程，在index.htl中编写如下代码，根据<link>和<script>标签配制好js和css库便可！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta lang="zh"/>
<title>select2</title>
<script src="js/jquery-3.3.1.js"></script>
<link href="css/select2.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-table.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/select2.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<table id = "demo">
</table>
</div>
<button οnclick="unall()">禁用全部</button>
<button οnclick="onall()">启用全部</button>
<button οnclick="msg()" id = "btn">select2触发</button>
<button οnclick="adddata()">增加数据</button>
<button οnclick="adddata_temp()">判断增加数据</button>
<button οnclick="setdata()">设置值</button>
<!--给select2设置值-->
<button οnclick="setnull()">设置空</button>
<button οnclick="getvalue()">得到值(data方法)</button>
<button οnclick="getvalue_()">得到值(jquery选择器)</button>
<button οnclick="jud_init()">判断是否初始化</button>
<button οnclick="kill()">销毁select2</button>
<button οnclick="help()">启用select2</button>
<button οnclick="on_()">绑定select事件</button>
<button οnclick="off_()">解除绑定select事件</button>
<button οnclick="trigger()">触发事件</button>
<select class="test" multiple="multiple" style="300px">
<optgroup label="阿拉伯数字">
<option>1</option>
<option disabled="disabled">2(禁用)</option>
<option>3</option>
</optgroup>
<optgroup label="汉字">
<option selected="selected">一</option> //默认选中
<option disabled="disabled">二(禁用)</option>
<option>三</option>
</optgroup>
</select>
<script type="text/javascript">
function formatState (state) {
if (!state.id) {
return state.text;
}
var $state = $(
'<span><img src="' + 'images/1.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
function msg(){
alert('select2点击触发');
}
function adddata(){
var data = {
id: 6,
text: '四'
};
var newOption = new Option(data.text,data.id,false,false);
$('.test').append(newOption).trigger('change');
}
function adddata_temp(){
var data = {
id: 6,
text: '五'
};
if ($('.test').find("option[value='" + data.id + "']").length) {
$('.test').val(data.id).trigger('change');
} else {
var newOption = new Option(data.text, data.id,true,true);
$('.test').append(newOption).trigger('change');
}
}
function setdata(){
$('.test').val(['1','三']);
$('.test').trigger('change');
}
function setnull(){
$('.test').val(null).trigger('change');
}
function getvalue(){
var info = $(".test").select2('data');
alert('数据类型:' + typeof info);
alert("数据值:" + JSON.stringify(info));
}
function getvalue_(){
var info = $('.test').find(':selected').data('own'); //调用自定义 'own' 属性
alert(JSON.stringify(info));
}
function jud_init(){
if ($('.test').hasClass("select2-hidden-accessible")) {
alert('已初始化');
}else{
alert('未初始化');
}
}
function kill(){
$('.test').select2('destroy');
}
function help(){
$('.test').select2();
}
function on_(){
$('.test').on('select2:select',function (e) {
alert(JSON.stringify(e.params.data));
})
}
function off_(){
$('.test').off('select2:select');
alert('off select');
}
function trigger() { //该函数的执行会触发select2:select事件的执行，即一点trigger按扭会触发select2:select（在本文是on_()函数的执行）
var data = {
"id": 10,
"text": "胡海",
"nick": "蓝月"
};
$('.test').trigger({
type: 'select2:select',
params: {
data: data
}
});
}
$(document).ready(function () {
$('.test').select2({
templateResult:formatState, //下拉列表的格式
//templateSelection: formatState, //选择后的格式
dropdownParent:$('#btn'),
tags: true, //允许自定义值（在框内输入自定义值后回车）
allowClear: true, //都允许删除
maximumSelectionLength:2, //最大允许选择两个
tokenSeparators:[','], //自定义值时，输入','则完成自定义
createTag: function (params) { //必须包括'@'元素才能完成自定义值
if (params.term.indexOf('@') === -1) {
return null;
}
return {
id: params.term,
text: params.term
}
},
insertTag: function (data, tag) {
data.push(tag);
}
,templateSelection: function (data,container) { //创建自定义 'own' 属性，值为 'this is my data'
$(data.element).attr('data-own','this is my data');
return data.text + typeof container;
}
});
})
$('#demo').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '商品'
}, {
field: 'price',
title: '价格'
}, {
field: 'country',
title: '国家',
formatter:function (value,row,index) {
return'<select class="from" name="states[]" multiple="multiple" οnchange="change_value(this.options[this.options.selectedIndex].value)" style=" 200px">
' + '</select>';
}
}],
onLoadSuccess: function () { //加载成功时执行a
console.info("加载成功");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
},
data: [{
id: 1,
name: '电脑',
price: '$1000',
country:'中国'
}, {
id: 2,
name: '冰箱',
price: '$500',
country:'美国'
}, {
id: 3,
name: 'country',
price:'$10000',
country: '意大利'
}]
});
function init() {
var countrys = [
'中国',
'美国',
'意大利'
];
$('.from').select2({
data:countrys
});
}
function unall(){
$('.from').prop('disabled',true);
}
function onall(){
$('.from').prop('disabled',false);
}
function change_value(value){
alert('change:' + value);
}
$(document).ready(function () {
init();
})
$('.from').on('select2:open',function () {
alert('on open');
})
$('.from').on('select2:select',function () {
alert('on select');
})
$('.from').on('select2:close',function () {
alert('on close');
})
$('.from').change(function () {
alert('change');
})
$('.from').on('select2:unselect',function () {
alert('on unselect');
})
$('.from').on('select2:opening',function () {
alert('on opening');
})
$('.from').on('select2:selecting',function () {
alert('on selecting');
})
$('.from').on('select2:unselecting',function () {
alert('on unselecting');
})
$('.from').on('select2:closing',function () {
alert('on closing');
})
</script>
</body>
</html>注意：
1.想要正确运行本项目，需要在项目根目录创建images目录，并放置一张 '1.png' 的图片
运行结果：
