我一般用他来做多选下拉框,如图
首先写一个<select>标签:jc_selDept
<td class="formValue">
<input type="text" id="jc_smallDept" name="jc_smallDept" style="display:none;" />
<input type="text" id="jc_sdeptName" name="jc_sdeptName" style="display:none;" />
<!-- 上面两个标签可以用来存select的val和text -->
<select id="jc_selDept" name="jc_selDept" multiple></select>
</td>
然后js里面初始化插件:
//用ddata数据初始化多选下拉框
$("#jc_selDept").select2({
placeholder: '请选择',
data: ddata,
multiple: true,
maximumSelectionLength: 2,
minimumResultsForSearch: -1
});
这里面的ddata是一个数组,如
var ddata = [{ id: 1, text: '部门1'},{ id: 2, text: '部门2'},{ id: 2, text: '部门3'}];
这个ddata可以用ajax获取后台数据。
读取select2的选中项:
var selObj = $('#jc_selDept').select2('data'); //选中项,是一个数组
var sted = '';
var stxt = '';
$.each(selObj, function (ind, val) {
sted += val.id;
stxt += val.text;
//可以用foreach循环读取出选中项
});
赋值select2选中项
arr = F_JC_DeptCode.split(","); //用逗号隔开的字符串
$('#jc_selDept').val(arr).trigger('change');
清空select2选中项
$('#jc_selDept').val(null).trigger('change');