boottstrap select 2 플러그 인 은 ajax 로 데 이 터 를 가 져 오고 표시 하 는 인 스 턴 스 입 니 다.

select 2 플러그 인 으로 다음 선택 상 자 를 실현 합 니 다:

1.html 코드

<div class="form-group" style='display:none;' id='preParamGroup'>
	<label for="inputEmail3" class="col-sm-2 control-label">     </label>
	<div class="col-sm-8">
		<select class="js-states form-control" id="preParamDefine" multiple="multiple" style="width: 100%"></select>
	</div>
</div>

2.js 코드

$("#preParamDefine").select2({
	 //data: data,
	placeholder:'   ',//      
	tags: true,//      
  	allowClear: true,//    			 
	ajax: {
		url: '/jgwork/param_select',
		type:'GET',
		dataType: 'json',
		data: function(){ return {'projectId':$('#projectSel').val()}},
		processResults: function (data) {
			 return {
				  results: data.result
				 };
		 }
		}
			 
})

ajax 로 서버 에서 데 이 터 를 가 져 와 processResult 에서 데 이 터 를 되 돌려 줍 니 다.
3.서버 코드
서버 에서 되 돌아 오 는 데이터 형식 은 다음 과 같 습 니 다.

data = [
{ 'text': 'enhancement' ,
 'children':[
 { 'id': 1, 'text': 'bug','parent':'enhancement' }, 
 { 'id': 2, 'text': 'duplicate' ,'parent':'enhancement'},
 { 'id': 3, 'text': 'invalid' ,'parent':'enhancement'},
 { 'id': 4, 'text': 'wontfix' ,'parent':'enhancement'}
  ]
}
]

코드:

proId = request.GET.get('projectId','')
paramList = [param.show_table() for param in paramDefine.objects.filter(proid = proId)]
data = []
index = 1
for item in paramList:
	childList = []
	for i in item['paramValue'].split(','):
		childList.append({
				'id': index,
				'text': i,
				'param': item['paramName']
			}) #  children    
		index += 1
	data.append({
			'text': item['paramName'],
			'children': childList
		})
return JsonResponse({'result':data})

index 는 0 부터 시작 할 수 없습니다.그렇지 않 으 면 생 성 된 id 가 0 이 므 로 이 옵션 을 선택 할 수 없습니다.select 2 에서 id=0 은 특별한 의미 가 있 기 때 문 입 니 다.
이상 의 이 boottstrap select 2 플러그 인 은 ajax 로 데 이 터 를 가 져 오고 표시 하 는 인 스 턴 스 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.