与select2有关的知识点总结
1.多选下拉框设置提示
var datass = [
{ id:0, text: '你好' },
{ id:1, text: '好久不见' },
{ id:2, text: '好想你' }
];
var $select= $("#select").select2({
multiple: true,
placeholder: "问候语",
data:datass
// allowClear: true,
});
2.多选框的change事件
$select.on("change",function(e){
var valdata = $(this).val();
}
3.多选下拉列表的清空事件
$select.val('').trigger('change');
4.队选中菜单进行操作
$select.on("select2:select",function(){
var valdata = $(this).val();
if(valdata.indexOf("0")>-1){
a.val('true');
}else{
a.val('');
}
if(valdata.indexOf("1")>-1){
b.val('true');
}else{
b.val('');
}
if(valdata.indexOf("2")>-1){
c.val('true');
}else{
c.val('');
}
$datatable.search("").draw(true);
});
图文结合:
<select name="webmenu" id="quickQuery" style="width: 130px;height: 32px;" placeholder="类型">
<!--<option value="" id="all">全部类型</option>-->
<option value="1" id="btnMilestoneQS" class="milestone">用户1</option>
<option value="2" id="btnStoryQS" class="story">用户2</option>
<option value="3" id="btnSubtaskQS" class="task">用户3</option>
<option value="4" id="btnBugQS" class="bug">用户4</option>
</select>
$(function () {
//带图片
$("#sel_menu").select2({
templateResult: formatState,
templateSelection: formatState
});
});
function formatState(state) {
if (!state.id) { return state.text; }
var $state = $(
'<span><img src="/content/images/' + state.element.className + '.svg" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
Bootstrap Select2组件使用小结:
学习文章地址:https://www.cnblogs.com/telwanggs/p/7152258.html