用select2前, 要引入select2的css、select2的js、jquery
引入select2 css
<select id="staffKV_id" class="form-control select2-multiple" multiple></select>
引入jquery、select2 js
<script type="text/javascript">
//其他js代码
//下拉选项
var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];
$('#staffKV_id').select2({
language: "zh-CN",
width:"200px",
data:data,
placeholder:"相关执行人",
allowClear: true,
closeOnSelect: false
});
//其他代码
</script>
---------------------------------------------------------------------
js向html中追加多个select2控件,并初始化
<div id="select2_div_id">
<!-- select2下拉多选占坑 js中append select2控件 -->
</div>
js
//初始化下拉选项
var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];
var tmp_id = 不重复的字符串;//每次追加的控件id不能重复
//追加select2多选控件
$("#select2_div_id").append('<select id="select2_'+ tmp_id +'" class="form-control select2-multiple" multiple></select>');
//重新渲染下拉控件
$('#select2_'+ tmp_id).select2({
language: "zh-CN",
width:"200px",
data:data,
placeholder:"相关执行人",
allowClear: true,
closeOnSelect: false
});