html:
select2单选
<form class="form-horizontal" role="form" id="form">
<select id="singleSelect" name="singleSelect" data-placeholder=“请选择” style="width:100%;"></select>
</form>
select2多选
<form class="form-horizontal" role="form" id="form">
<select id="mutiSelect" name="mutiSelect" multiple="multiple" data-placeholder=“请选择” style="width:100%;"></select>
</form>
注意：placeholder属性在select2插件初始化时无效，必须在html中写入才有作用
js:
select2单选插件初始化
$(‘#singleSelect‘).select2({
data:[]
}).on(‘change‘, function() {
//$(this).valid();可以即时验证
var items = $(‘#moduleNameSelect‘).select2(‘val‘);
$(‘#modules‘).val(items);
});
select2多选插件初始化
$(‘#mutiSelect‘).select2({
allowClear: true,
data:[]
}).on(‘change‘, function() {
//$(this).valid();可以即时验证
var items = $(‘#moduleNameSelect‘).select2(‘val‘);
$(‘#modules‘).val(items);
});
注意：
data中格式为json数组[{id:1,text:选项1}，{id:1,text:选项2}]；
allowClear：允许清除选项
valid方法是jquery.validate.js中的方法，调用时需要初始化方法validate( )；而且由于使用select2美化select下拉列表后，select2会把原来的select隐藏掉，设置css属性（display:none），然后再通过select2重新定制界面，且jquery.validate.js默认不是校验:hidden属性的控件，所以如果验证select选择框，需要在下面函数写入ignore:""
$(‘#form‘).validate({
ignore:"",
rules: {
mutiSelect:{
required:true
}
},
messages: {
mutiSelect:{
required:"至少选择一个模块"
}
},
debug: false,
});
获取select单选选中的值的id：
$("#singleSelect option:checked").val();
获取select单选选中的值的text：
$("#singleSelect option:checked").text();
获取select多选选中的值id：
$(‘#mutiSelect‘).select2(‘val‘);
select2插件重新赋值data数据：
data中格式为json数组:data=[{id:1,text:选项1}，{id:1,text:选项2}]；
$(‘#singleSelect‘).select2({
data:data
});
select2插件赋值：
单选：var value = 1；
单选：var value1 = [1,2]；
$(‘#singleSelect‘).val(value).trigger(‘change‘);
$(‘#mutiSelect‘).val(value1).trigger(‘change‘);
如何不触发select2给下拉框赋值:
$(‘#singleSelect‘).val(value).select();
原文地址：https://www.cnblogs.com/Bud-blog/p/11841099.html