不通过页面提交如何实现两个复选框(multiple select)之间内容的传递??解决后马上给分!

flywolfkyo 2003-10-20 10:58:34
比如现在我有两个复选框,中间两个移动按钮(一个是“左移”,一个是“右移”)
我现在在左边的复选框中选中了两项,然后点击“右移”按钮,这两项就能添加到右边的复选框中。相反的,点“左移”的话就产生相反的操作效果。

我知道通过提交页面传递参数可以实现。
怎样才能不提交页面来实现这样的转移呢?用Javascript或者vbscript可以吗?请指点!

能实现的话马上给分!
...全文
117 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
flywolfkyo 2003-10-20
  • 打赏
  • 举报
回复
to: hover_online(ξ芎メ)
太感谢了!真想多给你几十分!可惜分不够了 :)
1蓝天1 2003-10-20
  • 打赏
  • 举报
回复
顶一下,学习
hover_online 2003-10-20
  • 打赏
  • 举报
回复
<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; //number of options that were removed (num selected options)

//move selected options to right select box (to)
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;
}
}
//-->
</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>
<br>
<br>
<br>
<br>
<hr>
<div align='right'>?2003 guymal.com - Guy Malachi, All Rights Reserved</div>
</body>
</html>

28,390

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧