用 Javascript 实现的“Dual listbox”(双向选择器)
来源:互联网 发布:最短路径路由算法 编辑:程序博客网 时间:2024/05/21 09:08
这是我用 Javascript 制作的“Dual listbox”(双向选择器)的一个应用示例,是从我的代码中抠出来的。在网页编程中经常会用到。
也许我的实现太烦琐了,希望大家有更好的代码贡献出来。
<html>
<head>
<title>选择器</title>
<link href="./style/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">
<script language="javascript">
function openwin(url, l, t, w ,h)
{open(url,'','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width='+ w +',height='+ h +',left='+ l +',top='+ t);}
function check_and_submit(frm)
{
SelectAll(frm.SelectedItem);
frm.submit();
}
</script>
</head>
<body>
<form name="frm1" id="frm1" method="post" action="save.asp">
<input name="allowsubmit" type="hidden" value="OK">
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height=10><td colspan=3></td></tr>
<tr>
<td width="220" align=center valign="top">
已分配该用户管理的栏目:<br><br>
<select name="SelectedItem" id="SelectedItem" size=12 multiple="true">
<option>无</option>
</select>
</select>
</td>
<td width="60" align=center>
<br><br>
<button onClick="MoveSingleItem(WaitSelectItem, SelectedItem)"><</button><br><br>
<button onClick="MoveAllItems(WaitSelectItem, SelectedItem)"><<</button><br><br><br><br>
<button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)">></button><br><br>
<button onClick="MoveAllItems(SelectedItem, WaitSelectItem)">>></button><br>
</td>
<td width="220" align=center valign="top">
待分配的栏目:<br><br>
<select name="WaitSelectItem" size=12 multiple=true>
<option>师大要闻</option>
<option>视频新闻</option>
<option>图片新闻</option>
<option>专题要闻</option>
<option>十万个为什么</option>
<option>代码测试</option>
<option>www.why100000.com</option>
</select>
</td>
</tr>
</table>
</form>
<script language="javascript">
function MoveSingleItem(sel_source, sel_dest)
{
if (sel_source.selectedIndex==-1) //源:没有点选任何项目
return;
if (sel_source.options[0].text=="无") //源:只有“无”项目
return;
if (sel_dest.options[0].text=="无") //目标:只有“无”项目,则先删除该提示性项目
sel_dest.options.remove(0);
var SelectedText = sel_source.options[sel_source.selectedIndex].text;
sel_dest.options.add(new Option(SelectedText));
sel_source.options.remove(sel_source.selectedIndex);
if (sel_source.options.length==0) //源:如果删除完所有有用项目,则添加提示项目:“无”
sel_source.options.add(new Option("无"));
}
function MoveAllItems(sel_source, sel_dest)
{
if (sel_source.options[0].text=="无") //源:只有“无”项目
return;
if (sel_dest.options[0].text=="无") //目标:只有“无”项目,则先删除该提示性项目
sel_dest.options.remove(0);
//首先拷贝所有项目到目标:
var sel_source_len = sel_source.length;
for (var j=0; j<sel_source_len; j++)
{
var SelectedText = sel_source.options[j].text;
sel_dest.options.add(new Option(SelectedText));
}
//然后删除“源”所有项目:
while ((k=sel_source.length-1)>=0)
{
if (sel_source.options[0].text=="无") //源:只有“无”项目
break;
sel_source.options.remove(k);
if (sel_source.options.length==0) //源:如果删除完所有有用项目,则添加提示项目:“无”
sel_source.options.add(new Option("无"));
}
}
function SelectAll(theSel) //选中select中全部项目
{ for (i = 0 ;i<theSel.length;i++)
theSel.options[i].selected = true;
}
</script>
张庆 zhangking at 263.net
http://www.why100000.com
http://soft.why100000.com
2004.2.22
- 用 Javascript 实现的“Dual listbox”(双向选择器)
- 用 Javascript 实现的“Dual listbox”(双向选择器)
- 这是我用 javascript 制作的“Dual listbox”(双向选择器)的一个应用示例
- 用Javascript实现的Dual listbox
- Bootstrap Dual Listbox动态数据实现
- 用Javascript实现拖曳ListBox中拖曳的功能
- UIPickerView 实现双向选择器
- JavaScript实现的颜色选择器
- 用GtkTreeView实现ListBox的示例
- javascript 实现双向选取
- JavaScript实现CSS选择器
- javascript操作listbox,实现无刷新
- 如何用JavaScript实现类似于ListBox功能
- javascript实现数据双向绑定的三种方式
- 五十行javascript代码实现简单的双向数据绑定
- 五十行javascript代码实现简单的双向数据绑定
- JavaScript中MVVM框架是如何实现双向绑定的
- MySQL Dual-Master 双向同步
- Redhat Linux9.0中 Squid 代理安装笔记
- 如何组织一个高效的开发团队
- 网络实验:路由、代理和网关以及双网卡
- 在我们的程序中让电脑说英语
- 网站用户需求分析基本问题
- 用 Javascript 实现的“Dual listbox”(双向选择器)
- 认识 VB 的文件系统对象 FSO
- 网站项目实施业务流程及规范
- 用VS.NET创建.NET可复用数据库组件
- 创建网站的 RSS 内容摘要
- 在 WebForm 的 DadaGrid 中显示图象
- 用VC5实现多线程
- 如何在VC 下定制多媒体真彩封页
- 我还是喜欢 C/C++!!!