<--------------------------------- 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>
'Programing > HTML' 카테고리의 다른 글
input 자동완성 끄기 HTML (0) | 2019.04.29 |
---|---|
색상코드 , 컬러코드 (0) | 2017.10.25 |