Select2 Multiple 구성하기

<---------------------------------   HTML  -------------------------------------------------->

<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/adminlte/bower_components/select2/dist/css/select2.min.css">

<script src="${pageContext.request.contextPath }/resources/adminlte/bower_components/select2/dist/js/select2.full.min.js"></script>

<select id="maz" name="maz" class="select2-selection-multiple" multiple="multiple">

</select>

<input type="hidden" name="maz2"  value="${maz}">

<---------------------------------   HTML  -------------------------------------------------->

<SCRIPT>

var data = [

{ id : 1 ,text : '수요계획' },

{ id : 2 ,text : 'RTF' },

{ id : 3 ,text : '과부족' },

{ id : 4 ,text : '생산계획' },

{ id : 5 ,text : '재고' },

{ id : 6 ,text : '재고율' },

{ id : 7 ,text : '생산요청량' }

];

// class 에 선언한 부분을 찾아서 select2 형태로 꾸며준다. 

$('.select2-selection-multiple').select2({

placeholder: "Select an option",    // 제일위에 보여질 타이틀 같은 옵션 

allowClear: true,

tags: true,

    tokenSeparators: [',', ' '],

    data : data ,      // 실제 Select Option에 들어갈 데이터 

});

// 서버에서 넘어온 값을 처리하는 로직 

var vMaz = $('input[name=maz2]').val();    

//ex) 복수의 값을 선택하면 1 , 3  같이 콤마를 경계로 한 String 값을

가진다

var vMaz2= vMaz.split(','); // 콤마를 기준으로 스플릿 해준다   [ 1 , 3 ] 

$('.select2-selection-multiple').val(vMaz2).trigger('change');  // 해당 value 의 값이 선택된다.

</SCRIPT>