select2插件单选及多选应用

Posted 2020-11-29 bud-blog

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();