select多选框操作

<script   language="JavaScript"   TYPE="text/javascript">   

<!--   

 

//Everything   you   see   here   was   written   by   Guy   Malachi   [e-mail]   

 

function   MoveUp(combo_name)   

{   

var   combo=document.getElementById(combo_name);   

i=combo.selectedIndex;   

if   (i>0)   

{   

swap(combo,i,i-1);   

combo.options[i-1].selected=true;   

combo.options[i].selected=false;   

}   

}   

 

function   MoveDown(combo_name)   

{   

var   combo=document.getElementById(combo_name);   

i=combo.selectedIndex;   

 

if   (i<combo.length-1   &&   i>-1)   

{   

swap(combo,i+1,i);   

combo.options[i+1].selected=true;   

combo.options[i].selected=false;   

}   

}   

 

//this   function   is   used   to   swap   between   elements   

function   swap(combo,index1,   index2)   

{   

var   savedValue=combo.options[index1].value;   

var   savedText=combo.options[index1].text;   

 

combo.options[index1].value=combo.options[index2].value;   

combo.options[index1].text=combo.options[index2].text;   

 

combo.options[index2].value=savedValue;   

combo.options[index2].text=savedText;   

}   

 

function   MoveToTop(combo_name)   

{   

var   combo=document.getElementById(combo_name);   

i=combo.selectedIndex;   

 

for   (;i>0;i--)   

{   

swap(combo,i,i-1);   

combo.options[i-1].selected=true;   

combo.options[i].selected=false;   

}   

}   

 

function   MoveToBottom(combo_name)   

{   

var   combo=document.getElementById(combo_name);   

i=combo.selectedIndex;   

 

if   (i>-1)   

{   

for   (;i<combo.length-1;i++)   

{   

swap(combo,i+1,i);   

combo.options[i+1].selected=true;   

combo.options[i].selected=false;   

}   

}   

}   

 

//moves   options   from   one   selection   box   (combo   box)   to   another   

//removes   the   all   selected   options   from   one   combo   box   and   adds   them   to   the   second   combo   box   

 

function   MoveElements(FromComboName,ToComboName)   

{   

var   FromCombo=document.getElementById(FromComboName);   

var   ToCombo=document.getElementById(ToComboName);   

var   to_remove_counter=0;

 

for   (var   i=0;i<FromCombo.options.length;i++)   

{   

if   (FromCombo.options[i].selected==true)   

{   

var   addtext=FromCombo.options[i].text;   

var   addvalue=FromCombo.options[i].value;   

ToCombo.options[ToCombo.options.length]=new   Option(addtext,addvalue);   

FromCombo.options[i].selected=false;   

++to_remove_counter;   

}   

else   

{   

FromCombo.options[i-to_remove_counter].selected=false;   

FromCombo.options[i-to_remove_counter].text=FromCombo.options[i].text;   

FromCombo.options[i-to_remove_counter].value=FromCombo.options[i].value;   

}   

}   

 

//now   cleanup   the   last   remaining   options     

var   numToLeave=FromCombo.options.length-to_remove_counter;   

for   (i=FromCombo.options.length-1;i>=numToLeave;i--)     

{     

FromCombo.options[i]=null;   

}   

}   

 

function   toggleSelectAll(combo_name)   

{   

 

var   select_all_link=document.getElementById('select_all_link');   

var   combo=document.getElementById(combo_name);//get   the   select   

 

var   to_select=true;   

var   select_link_new_caption;//the   new   "Select   All"   link   caption   will   be   here   

if   (select_all_link.unselectAll==true)//this   is   a   new   attribute   that   is   dynamically   added   

{   

//we   now   want   to   select   all   options   

to_select=false;   

select_all_link.unselectAll=false;   

select_link_new_caption="Select   All";//set   the   new   caption   

}   

else   

{   

//we   now   want   to   unselect   all   options   

select_all_link.unselectAll=true;   

select_link_new_caption="Unselect   All";//set   the   new   caption   

}   

 

select_all_link.innerText=select_link_new_caption;//change   the   caption   of   the   select   all   link   

SelectAll(combo,to_select);   

}   

 

//select   is   true   for   selecting   all,   false   for   unselecting   all   

function   SelectAll(combo,select)   

{   

for   (var   i=0;i<combo.options.length;i++)   

{   

combo.options[i].selected=select;   

}   

}   

//-->

 

function show(){

var god=document.getElementById("right_select");

alert(god.options.length);} 

</script>   

 

</head>   

<body>   

<table   border=0   cellspacing=0   cellpadding=0>   

<tr   style='font-size:   .8em;'>   

<td   valign=bottom   align=left   >   

All   Elements   [   <span   onClick='toggleSelectAll("left_select")'   style='color:blue;cursor:pointer;cursor:hand;'   onMouseOver='this.style.color="red"'   onMouseOut='this.style.color="blue"'   id='select_all_link'>Select   All</span>   ]   

</td>   

<td>   

&nbsp;   

</td>   

<td   align=left   valign=bottom   align=right   >   

Selected   Elements   

</td>   

<td>   

&nbsp;   

</td>   

</tr>   

<tr   valign=top>   

<td   rowspan=4>   

<select   multiple   Name='left_select'   id='left_select'   size='10'   TABINDEX=1   style='width:100%'>   

<option   VALUE="[e-mail]">Bill   Gates</option>   

<option   VALUE="[e-mail]">Bill   Clinton</option>   

<option   VALUE="[e-mail]">Bart   Simpson</option>   

<option   VALUE="[e-mail]">OJ   Simpson</option>   

<option   VALUE="[e-mail]">Jay   Leno</option>   

<option   VALUE="[e-mail]">David   Letterman</option>   

<option   VALUE="[e-mail]">Al   Gore</option>   

<option   VALUE="[e-mail]">George   W.   Bush</option>   

</select>   

</td>   

<td   rowspan=4   valign=center>   

<input   title='Move   elements   to   the   right   select   box.'   TABINDEX=2   onClick='MoveElements("left_select","right_select");'   style='width:76;cursor:hand;'   type=button   value="Add   &#187;">   

<br>   

<input   title='Return   elements   to   the   left   select   box.'   TABINDEX=3   onClick='MoveElements("right_select","left_select")'   style='width:76;cursor:hand;'   type=button   value="&#171;   Remove">   

</td>   

<td   rowspan=4>   

<select   multiple   Name='right_select'   id='right_select'   size='10'   style='width:184px'   TABINDEX=4   >   

</select>   

</td>   

<td>   

<input   title='Move   selected   element   to   the   top.'   TABINDEX=5   onClick='MoveToTop("right_select")'   style='width:20;height:40px;font-size:x-small;'   type=button   value="∧">   

</td>   

</tr>   

<tr   valign=bottom>   

<td>   

<input   title='Move   selected   element   up.'   TABINDEX=6   onClick='MoveUp("right_select")'   style='width:20px;height:20px;font-size   :   x-small;'   type=button   value="↑">   

</td>   

</tr>   

<tr   valign='top'>   

<td>   

<input   title='Move   selected   element   down.'   TABINDEX=7   onClick='MoveDown("right_select")'   style='width:20px;height:20px;font-size   :   x-small;'   type=button   value="↓">   

</td>   

</tr>   

<tr   valign='bottom'>   

<td>   

<input   title='Move   selected   element   to   the   bottom.'   TABINDEX=8   onClick='MoveToBottom("right_select")'   style='width:20px;height:40px;font-size   :   x-small;'   type=button   value="∨">   

</td>   

</tr>   

</table> 

<input type="button" onclick="show()" /> 

<br>   

<br>   

<br>   

<br>   

<hr>   

<div   align='right'>?2003   guymal.com   -   Guy   Malachi,   All   Rights   Reserved</div>   

</body>   

</html>

 

 

这是效果图

 

转自http://hi.baidu.com/nulldance/blog/item/82ee8da1d7d9598c461064d9.html