달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

<---------------------------------   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
Posted by 한설림
|