자바스크립트 셀렉박스(select) 동적변경(추가/삭제/이동) > script

자바스크립트 셀렉박스(select) 동적변경(추가/삭제/이동)

<script>

var ddakker = new Object();
ddakker.CategorySelectBox = function(){
 this.section = "----------"; // 구분선
}

// 카테로기에 추가
ddakker.CategorySelectBox.prototype = {
 addItem: function(kind){
  var totalOption = category.options.length; // SelectBox Option 개체수 담을 변수

  // 일반 아이템일때
  if( kind == "item" ){

   var newCategoryNo = 0;
   var categoryNoArray = new Array()

   for( var i=0; i<totalOption; i++){
    var optionValue = category.options[i].value; // Option의 Value 값을 담을 변수
    var index = optionValue.indexOf(",");
    var categoryNo = optionValue.substring(12,index-1);

    if( categoryNo != "-1" ){ // 구분선이라면 제외한다.
     categoryNoArray[i] = categoryNo;
    }
   }
   // 오름차순 정렬시킨다.
   categoryNoArray.sort();
   // 유니큐한 categoryNo를 구한다. 중간에 빈값이나 젤 큰값보다 1 큰 값으로 한다.
   for( var i=0; i<categoryNoArray.length; i++){
    if( categoryNoArray[i] == newCategoryNo ){
     newCategoryNo++;
    }else{
     break;
    }
   }

   category.options[totalOption] = new Option ("게시판"+newCategoryNo, "categoryNo='"+newCategoryNo+"',categoryName='게시판"+newCategoryNo+"'");
  }
  // 구분선일때
  else if( kind == "section" ){
   category.options[totalOption] = new Option (this.section,"categoryNo='-1',categoryName='"+this.section+"'");
   // 추가한 아이템에 포커스
   category.options[totalOption].selected = true;

  }
  // 추가 한 후 선택과 동시에 수정할수 있게끔( 구분선은 못하게 )
  this.selectItem(totalOption);
 },

 removeItem: function(){
  var selectedIndex = category.selectedIndex;
  if( selectedIndex != -1 )
   category.options[selectedIndex] = null;
 },

 sortItem: function(){
  // select 박스 option 갯구를 구한다.
  var totalOption = category.options.length;

  for( var i=0; i<totalOption; i++){
   var optionValue = category.options[i].value;
   var optionValueArray = optionValue.split(",");
   // 웹에 표시될 순번정하기
   optionValue = optionValueArray[0] + "," + optionValueArray[1] + ",categorySeq='" + i + "'";

   var categoryNo = this.getItemValue("categoryNo",i);
   var categoryName = this.getItemValue("categoryName",i);

   // 순번 넣은거 다시 재 저장
   if( categoryNo != "-1" ){
    category.options[i] = new Option (categoryName, optionValue);
   }else{
    category.options[i] = new Option (this.section, optionValue);
   }

  }
 },
 selectItem: function(selectedIndex){

  var categoryNo = this.getItemValue("categoryNo",selectedIndex)
  categoryName.value = this.getItemValue("categoryName",selectedIndex);

  if( categoryNo != "-1" ){

   if( categoryName.readOnly == true )
    categoryName.readOnly = false;
   if( categoryName.disabled == true )
    categoryName.disabled = false;

   categoryName.focus(); // 텍스트 박스에 포커스 주기
   category.options[selectedIndex].selected = true; // 아이템에 포커스 주기
  }
  else
  {
   categoryName.readOnly = true;
   categoryName.disabled = true;
  }

  // 임시 값 찍어보기..
  var text = category.options[selectedIndex].text;
  var value = category.options[selectedIndex].value;
  document.getElementById("view").innerHTML = text + "<br>" + value + "<br>index: "+selectedIndex;
 },

 getItemValue: function(param,selectedIndex){
  var optionValue = category.options[selectedIndex].value;
  var optionValueArray = optionValue.split(",");

  if( param == "categoryNo" ) var array = 0;
  else if( param == "categoryName" ) var array = 1;
  else if( param == "categorySeq" ) var array = 2;

  var index = optionValueArray[array].indexOf("'");

  var categoryParam = optionValueArray[array].substring(index+1,optionValueArray[array].length-1);

  return categoryParam;
 },
 // 카테고리 아이템 명 변경 메소드
 changeName: function(th){
  var selectedIndex = category.selectedIndex;
  var categoryNo = this.getItemValue("categoryNo",selectedIndex);

  if( (selectedIndex != -1) && categoryNo != -1 ) // 선택된게 있을때만
  {
   category.options[selectedIndex].text = th.value;

   category.options[selectedIndex].value = "categoryNo='" + categoryNo + "',categoryName='" + th.value + "'";
  }
 },

 // 카테고리 아이템 위/아래로 이동하기
 moveItem: function(motion){
  var selectedIndex = category.selectedIndex;  // 선택된 인덱스값.

  if( selectedIndex != -1 ){ // 선택된게 있다면
   var lastIndex = category.options.length - 1; // 마지막 인덱스값. 첫번째는 0이니까 안 구하고.
   var tempItem = new Option();
   var tempItemText = null;
   var tempItemValue = null;
   var nowItemText = null;
   var nowItemValue = null;

   if( motion == "up" ){ // 위버튼일대
    if( selectedIndex != 0 ){ // 0이면 젤 위니까 더이상 올라갈수 없다.
     // 현제꺼보다 위 아이템 임시 저장
     tempItemText = category.options[selectedIndex-1].text;
     tempItemValue = category.options[selectedIndex-1].value;
     tempItem = new Option(tempItemText,tempItemValue);

     // 현제 아템 알맹이 저장
     nowItemText = category.options[selectedIndex].text;
     nowItemValue = category.options[selectedIndex].value;

     // 위 아래 교체
     category.options[selectedIndex-1] = new Option(nowItemText,nowItemValue);
     category.options[selectedIndex] = tempItem;

     category.options[selectedIndex-1].selected = true;
    }
   }else{     // 아래버튼일때
    if( selectedIndex != lastIndex ){ // 마지막값이면 더 이상 내려갈수 없다.
     // 현제꺼보다 아래 아템 임시 저장
     tempItemText = category.options[selectedIndex+1].text;
     tempItemValue = category.options[selectedIndex+1].value;
     tempItem = new Option(tempItemText,tempItemValue);

     // 현제 아템 알맹이 저장
     nowItemText = category.options[selectedIndex].text;
     nowItemValue = category.options[selectedIndex].value;

     // 위 아래 교체
     category.options[selectedIndex+1] = new Option(nowItemText,nowItemValue);
     category.options[selectedIndex] = tempItem;

     category.options[selectedIndex+1].selected = true;
    }
   }
  }
 },

 window_load: function(){
  category.options[0] = new Option ("게시판0", "categoryNo='0',categoryName='게시판0'");
  category.options[1] = new Option ("게시판1", "categoryNo='1',categoryName='게시판1'");
  category.options[2] = new Option ("게시판2", "categoryNo='2',categoryName='게시판2'");
 }
}

</script>

<body onLoad="new ddakker.CategorySelectBox().window_load();">
 <select id="category" size="10" style="width:275px" onChange="new ddakker.CategorySelectBox().selectItem(this.selectedIndex);">
 </select>

<br><br>

<input type="text" id="categoryName" OnKeyUp="new ddakker.CategorySelectBox().changeName(this);"
readOnly disabled /><br>

<input type="button" value="추가" onClick="new ddakker.CategorySelectBox().addItem('item');" />
<input type="button" value="삭제" onClick="new ddakker.CategorySelectBox().removeItem();" />
<input type="button" value="구분선" onClick="new ddakker.CategorySelectBox().addItem('section');" />
<input type="button" value="위" onClick="new ddakker.CategorySelectBox().moveItem('up');" />
<input type="button" value="아래" onClick="new ddakker.CategorySelectBox().moveItem('down');" />
<input type="button" value="정렬" onClick="new ddakker.CategorySelectBox().sortItem();" />

<br>
<div id="view"></div>

</body>