본문 바로가기
Work/javascript

두개의 창에서 선택한 항목이 더블 클릭시 우측창으로 넘어 가는 기능

by 승수 2010. 4. 2.


리스트 창
<table width="100%">
        <tr>
         <th class="first">회선번호</th>
         <td></td>
         <th>선택된 회선번호</th>
        </tr>
     <tr>
      <td class="first" style="height:150px">
       <html:select property="subsinfo.oldMoNo"  size="10" styleId="sourceList" onclick="lineinfo1(sourceList);" ondblclick="moveElementRight(this, targetList); " style="width:280px; height:150px">
        <html:options collection="omList" property="value" labelProperty="label" />
       </html:select>
      </td>
      <td width=30>
       > <br>
       <
      </td>
      <td >
       <html:select property="subsinfo.newMoNo" multiple="true" size="10" styleId="targetList" ondblclick="moveElementFix(this, sourceList); " style="width:280px; height:150px">
        <html:options collection="nmList" property="value" labelProperty="label" />
       </html:select>
      </td>
     </tr>
    </table>


자바 스크립트 부분
function copyElement(sourceObj, targetObj){
  var elms = sourceObj.options;
  for( i = 0, k = elms.length; i < k; i++ ){
   if( elms[i].selected ){
    targetObj.add(new Option(elms[i].text, elms[i].value, false, false));
   }
  }
  sourceObj.selectedIndex=-1;
 }

 function removeElement(sourceObj){
  var elms = sourceObj.options;
  var posArr = new Array();
  var increase = 0;
  for( i = 0, k = elms.length; i < k; i++ ){
   if( elms[i].selected ){
    posArr[increase++] = elms[i].value;
   }
  }
  for( i = 0, k = posArr.length; i < k; i++ ){
   for( x = 0, y = elms.length; x < y; x++ ){
    if( (posArr[i] == elms[x].value) && elms[x].selected ){
     sourceObj.remove(x);
     x = 0;
     y--;
    }
   }
  }
 }
 
function moveElementFix(sourceObj, targetObj, isSort){
  var elms = sourceObj.options;
  for( i = 0, k = elms.length; i < k; i++ ){
   if( elms[i].selected ){
   }
  }
  removeElement(sourceObj);
  sourceObj.selectedIndex = -1;
 }
 function moveElementRight(sourceObj, targetObj, isSort){
  var elms = sourceObj.options;
  var elmt = targetObj.options;
  for( i = 0, k = elms.length; i < k; i++ ){
   if( elms[i].selected ){
    for( a = 0, b = elmt.length; a < b; a++ ){
     if(elms[i].value == elmt[a].value){
      alert("이미 동일한 인터페이스가 선택되어 있습니다.");
      return;
     }
    }
    targetObj.add(new Option(elms[i].text, elms[i].value, false, false));
   }
  }
 }