用Javascript 实现的Dual listbox- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用Javascript 实现的Dual listbox

Javascript: JS幻想读取二进制文件; javascript 层展开/关闭，带缓冲效果; 仿淘宝首页分类列表效果实现代码; javascript 像素拼图实现代码; javascript+css 新闻显示tab 选项卡效果; [转]去百度面试的javascript 收获; 用JavaScript显示随机图像或引用; 一个类似vbscript的round函数的javascript函数; JavaScript 学习点滴记录; Js 获取HTML DOM节点元素的方法小结; 在线编辑器中换行与内容自动提取; 使用自定义setTimeout和setInterval使之可以传递参数和对象参数; javascript 绘制矩形框; 纯JS 绘制数学函数; javascript Excel操作知识点; jQuery 注意事项与原因分析; JQuery 初体验(建议学习jquery); RGB颜色值转HTML十六进制(HEX)代码的JS函数; JavaScript 使用技巧精萃(.net html; js tab 选项卡

No. « ‹ 133 134 135 136 › »

技术文章搜索

关键字

用Javascript 实现的Dual listbox

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 335 ::

收藏到网摘: n/a

我与Javascript 随笔（一）（献给所有爱好Javascript的朋友） javascript中的数组应用的一点发现

这是我用 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>

<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>

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>

    作者信息：
    张庆 [email protected]
    http://www.why100000.com
    http://soft.why100000.com

我与Javascript 随笔（一）（献给所有爱好Javascript的朋友） javascript中的数组应用的一点发现

用Javascript 实现的Dual listbox

评论 (0) All