[javascript]selectt物件的使用方法

有關網頁及相關語法的討論
回覆文章
頭像
tim
文章: 1379
註冊時間: 2008年 11月 26日, 00:49

[javascript]selectt物件的使用方法

文章 tim »

代碼: 選擇全部

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Edit</title>

<script language="javascript" type="Text/javascript">
<!--
function swapNodes(item1,item2) {
var itemtmp = item1.cloneNode(1);
var parent = item1.parentNode;
item2 = parent.replaceChild(itemtmp,item2);
parent.replaceChild(item2,item1);
parent.replaceChild(item1,itemtmp);
itemtmp = null;
}
//-->
</script>

<SCRIPT language="javascript">
 function moveUp(oSelect,isToTop)
 {
   if(isToTop == null)
     var isToTop = false;
   if(oSelect.multiple)
   {
     for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
     {
       if(isToTop)
       {
         if(oSelect.options[selIndex].selected)
         {
           var transferIndex = selIndex;
           while(transferIndex > 0 && !oSelect.options[transferIndex-1].selected)
           {
             swapNodes(oSelect.options[transferIndex],oSelect.options[transferIndex - 1]);
             transferIndex--;
           }
         }
       }
       else
       {
         if(oSelect.options[selIndex].selected)
         {
           if(selIndex > 0)
           {
             if(!oSelect.options[selIndex - 1].selected)
               swapNodes(oSelect.options[selIndex],oSelect.options[selIndex - 1]);
           }
         }
       }
     }
   }
   else
   {
     var selIndex = oSelect.selectedIndex;
     if(selIndex <= 0)
       return;
     if(isToTop)
     {
       while(selIndex > 0)
       {
         swapNodes(oSelect.options[selIndex],oSelect.options[selIndex - 1]);
         selIndex --;
       }
     }
     else    
       swapNodes(oSelect.options[selIndex],oSelect.options[selIndex - 1]);
   }
 }


 function moveDown(oSelect,isToBottom)
 {
   if(isToBottom == null)
     var isToBottom = false;
     
   var selLength = oSelect.options.length - 1;
   
   if(oSelect.multiple)
   {
     for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)
     {
       if(isToBottom)
       {
         if(oSelect.options[selIndex].selected)
         {
           var transferIndex = selIndex;
           while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)
           {
 swapNodes(oSelect.options[transferIndex],oSelect.options[transferIndex + 1]);
             transferIndex ++;
           }
         }
       }
       else
       {
         if(oSelect.options[selIndex].selected)
         {
           if(selIndex < selLength)
           {
             if(!oSelect.options[selIndex + 1].selected)
             swapNodes(oSelect.options[selIndex],oSelect.options[selIndex + 1]);
           }
         }
       }
     }
   }
   else
   {
     var selIndex = oSelect.selectedIndex;
     if(selIndex >= selLength - 1)
       return;
     if(isToBottom)
     {
       while(selIndex < selLength - 1)
       {
         swapNodes(oSelect.options[selIndex],oSelect.options[selIndex + 1]);
         selIndex ++;
       }
     }
     else    
       swapNodes(oSelect.options[selIndex],oSelect.options[selIndex + 1]);
   }
 }

 function moveSelected(oSourceSel,oTargetSel)
 {
   var arrSelvalue = new Array();
   var arrSelText = new Array();
   var arrvalueTextRelation = new Array();
   var index = 0;
   
   for(var i=0; i<oSourceSel.options.length; i++)
   {
     if(oSourceSel.options[i].selected)
     {
       arrSelvalue[index] = oSourceSel.options[i].value;
       arrSelText[index] = oSourceSel.options[i].text;
       arrvalueTextRelation[arrSelvalue[index]] = oSourceSel.options[i];
       index ++;
     }
   }
   
   for(var i=0; i<arrSelText.length; i++) 
   {
     var oOption = document.createElement("option");
     oOption.text = arrSelText[i];
     oOption.value = arrSelvalue[i];
     oTargetSel.options.add(oOption);
     oSourceSel.removeChild(arrvalueTextRelation[arrSelvalue[i]]);
   }
 }

 function moveAll(oSourceSel,oTargetSel)
 {
   var arrSelvalue = new Array();
   var arrSelText = new Array();
   
   for(var i=0; i<oSourceSel.options.length; i++)
   {
     arrSelvalue[i] = oSourceSel.options[i].value;
     arrSelText[i] = oSourceSel.options[i].text;
   }
   
 for(var i=0; i<arrSelText.length; i++) 
   {
     var oOption = document.createElement("option");
     oOption.text = arrSelText[i];
     oOption.value = arrSelvalue[i];
     oTargetSel.options.add(oOption);
   }
   
   oSourceSel.innerHTML = "";
 }

 function deleteSelectItem(oSelect)
 {
   for(var i=0; i<oSelect.options.length; i++)
   {
     if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)
     {
       oSelect.options[i] = null;
       i --;
     }
   }
 }

function go()
{
for (var i=document.getElementById('right').options.length-1; i>=0; i--) document.getElementById('right').options[i].selected=true;
document.getElementById('form1').submit();
}
 </SCRIPT>
 </head>
 <BODY style="font-size:12px">
 <form id="form1" name="form1" method="post" action="">

<table><tr>

<td>
<font size="2"><b>LEFT</b></font>

  <SELECT name="left" size="14" id="left" multiple style="width:200px; ">
   <OPTION value="A1">A0001</OPTION>
   <OPTION value="A2">A0002</OPTION>
   <OPTION value="A3">A0003</OPTION>
  </SELECT>
</td>

<td>
  <INPUT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.getElementById('right'));">
  

  <INPUT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.getElementById('right'));">
  

  <INPUT style="border:1px solid black " type="button" value="上移到頂" 
 onClick="moveUp(document.getElementById('right'),true);">
  

  <INPUT style="border:1px solid black " type="button" value="下移到底" 
 onClick="moveDown(document.getElementById('right'),true);">
  

  <INPUT type="button" value="刪除選項" style="border:1px solid black " 
 onClick="deleteSelectItem(document.getElementById('left'));deleteSelectItem(document.getElementById('right'))">
  

  <INPUT style="border:1px solid black " type="button" value="向右移動" onClick="moveSelected(document.getElementById('left'),document.getElementById('right'))">
  

  <INPUT style="border:1px solid black " type="button" value="向左移動" onClick="moveSelected(document.getElementById('right'),document.getElementById('left'))">
  

  <INPUT style="border:1px solid black " type="button" value="全部右移" onClick="moveAll(document.getElementById('left'),document.getElementById('right'))">
  

  <INPUT style="border:1px solid black " type="button" value="全部左移" onClick="moveAll(document.getElementById('right'),document.getElementById('left'))">


<font size="2">( 支援多選移動 )</font>

</td>

<td>
<font size="2"><b>RIGHT</b></font>

  <SELECT name="right" size="14" id="right" multiple style="width:200px; ">
   <OPTION value="B1">B0001</OPTION>
   <OPTION value="B2">B0002</OPTION>
   <OPTION value="B3">B0003</OPTION>
   <OPTION value="B4">B0004</OPTION>
   <OPTION value="B5">B0005</OPTION>
   <OPTION value="B6">B0006</OPTION>
  </SELECT>
</td>

</tr></table>
 </form>

 </BODY>
 </html>

要注意的一點是FF不支援swapNode, 所以另外做了一支function來取代這個功能!
以上代碼在IE6.0 & FireFox1.5.0.7調用成功~~
多多留言, 整理文章, 把經驗累積下來.....
回覆文章