站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → 用Javascript 实现的Dual listbox

用Javascript 实现的Dual listbox

摘要: 用Javascript 实现的Dual listbox
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">

这是我用 Javascript 制作的“Dual listbox”(双向选择器)的一个应用示例，是从我的代码中抠出来的。在网页编程中经常会用到。

也许我的实现太烦琐了，希望大家有更好的代码贡献出来。


<head>
选择器
<link> href="./style/style.css" rel="stylesheet" type="text/css">



<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">
已分配该用户管理的栏目：



<select name="SelectedItem" id="SelectedItem" size=12 multiple="true">
<option>无</option>

</select>
</select>
</td>
<td width="60" align=center>
















</td>
<td width="220" align=center valign="top">
待分配的栏目：


<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 {
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++) }
</script>

作者信息：
张庆 zhangking@263.net
http://www.why100000.com
http://soft.why100000.com


　　
</td> </tr> </table> </textarea>
↑返回目录
前一篇: JavaScript对象与数组参考大全
后一篇: JavaScript基础实例:如何计算24点