select2 js动态追加 初始化下拉选项

用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
});