js select多选框操作
2014-04-03 14:30
501 查看
<script language="JavaScript" TYPE="text/javascript">
<!--
//Everything you see here was written by Guy Malachi guy@guymal.com
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>
</td>
<td align=left valign=bottom align=right >
Selected Elements
</td>
<td>
</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="bill@ms.com">Bill Gates</option>
<option VALUE="bill@unemployed.com">Bill Clinton</option>
<option VALUE="bart@brat.com">Bart Simpson</option>
<option VALUE="oj@free.com">OJ Simpson</option>
<option VALUE="j@nbc.com">Jay Leno</option>
<option VALUE="david@topten.com">David Letterman</option>
<option VALUE="maybe@next-time.com">Al Gore</option>
<option VALUE="prez@whitehouse.gov">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 »">
<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="« 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
<!--
//Everything you see here was written by Guy Malachi guy@guymal.com
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>
</td>
<td align=left valign=bottom align=right >
Selected Elements
</td>
<td>
</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="bill@ms.com">Bill Gates</option>
<option VALUE="bill@unemployed.com">Bill Clinton</option>
<option VALUE="bart@brat.com">Bart Simpson</option>
<option VALUE="oj@free.com">OJ Simpson</option>
<option VALUE="j@nbc.com">Jay Leno</option>
<option VALUE="david@topten.com">David Letterman</option>
<option VALUE="maybe@next-time.com">Al Gore</option>
<option VALUE="prez@whitehouse.gov">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 »">
<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="« 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【javascript】javascript中this关键字的用法(推荐)
- 网页的宽高时时随浏览器缩放而缩放
- JS选择打印
- JS中字符串的相关操作
- 【javascript】javascript中的this
- html 、javascript、css言简意赅
- 【javascript】JavaScript的函数和对象的对象化能力(推荐)
- 【javascript】javascript中JSON.parse()与eval()区别
- 【javascript】javascript中的JSON对象
- 用js实现table内容从下到上连续滚动
- 用js实现table内容从下到上连续滚动
- 解析多json组成的字符串
- 【javascript】javascript中的JSON.stringify函数的理解
- 【javascript】javascript中JSON.parse函数的理解
- C# 对象与JSON相互转换
- Json 序列化
- js 密码强度检测
- JS禁止选中文本方法
- js在chrome和IE下分别实现复制
- 数据格式之解析Json