这是我用 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)">&lt;</button><br><br>

      <button onClick="MoveAllItems(WaitSelectItem, SelectedItem)">&lt;&lt;</button><br><br><br><br>

      <button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)">&gt;</button><br><br>

      <button onClick="MoveAllItems(SelectedItem, WaitSelectItem)">&gt;&gt;</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>

用 Javascript 实现的“Dual listbox”(双向选择器)的更多相关文章

  1. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  2. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  3. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. 五十行javascript代码实现简单的双向数据绑定

    五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...

  5. Jquery双向select控件Bootstrap Dual Listbox

    效果预览: 一. 下载插件 github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox 也可以在这个网站中下载:http: ...

  6. JavaScript 数字转汉字+element时间选择器快速选择

    window.CN = { : '一', : '二', : '三', : '四', : '五', : '六', : '七', : '八', : '九', : '零' } window.LEVEL = ...

  7. jQ选择器学习片段（JavaScript 部分对应）

    $()函数在大多的JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElement ...

  8. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  9. 第一百三十九节，JavaScript，封装库--CSS选择器

    JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx  (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...

随机推荐

  1. acm入门搜索-水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处 ...

  2. Activity简单几步支持向右滑动返回

    向右滑动返回,对于屏幕过大的手机来说,在单手操作时,是一个不错的用户体验,用户不必再费力的或者用另一个手去点击屏幕左上角的返回按钮或者,手机右下角的返回按钮,轻轻向右滑动屏幕即可返回上一页,这个功能如 ...

  3. 微信公众平台开发者中心服务器配置Token验证失败问题

    微信发展如火如荼,没有哪家的企业营销能避开微信不谈的,那像我们这种给客户实施项目的多多少少会涉及微信端的开发,本文只要给从未做过微信开发的人做一些简单的演示,行家里手们可以呵呵一下该干嘛干嘛去了. 微 ...

  4. Dynamics CRM2013 附件禁用方案

    CRM2013的附件功能和以往有了不同,把公告.活动.注释合在了一块并称注释,在使用的过程中会发现一个无语的地方,就算表单状态为停用,注释还是处于可编辑状态,而且也查询不到公开的方法来处理注释的,为了 ...

  5. 分析比较KafkaWordCount及DierctKafkaWordCount

    参考spark官方文档,Spark Streaming + Kafka Integration Guide,其中提到Spark Streaming如何从Kafka中接收数据.主要有两种方法,一种是使用 ...

  6. 一台电脑上同启动两个Tomcat的方式，windows/Linux配置。

     安装两个jdk,一个JDK路径在:C:\ProgramFiles (x86)\Java\jdk1.7.0_25,另外一个JDK的路径在E:\UCMSServer\j2sdk 在环境变量里并设置J ...

  7. 我眼中的Linux设备树(一 概述)

    一 概述设备树(Device tree)是一套用来描述硬件属相的规则.ARM Linux采用设备树机制源于2011年3月份Linux创始人Linus Torvalds发的一封邮件,在这封邮件中他提倡A ...

  8. 使用GDAL工具对FY3系列卫星数据进行校正

    本文档主要对如何使用GDAL提供的工具对FY3系列卫星数据进行校正处理.FY3系列卫星提供的数据一般是以HDF5格式下发,一个典型的FY3A和FY3B的数据文件名如下: FY3A_MERSI_GBAL ...

  9. Cocos2d中update与fixedUpdate的区别(六)

    它如何工作呢? update:和fixedUpdate:方法实际这样工作. Cocos2D将从iOS接口中取得时间间隔(delta)在你的游戏代码执行期间,并且检查fixedUpdate:方法在间隔期 ...

  10. Android使用Canvas实现跑马灯

    网上的很多的教程都是通过更改TextView的属性进行跑马灯的设计.这样做有很多的缺点: 1.如果TextView没有获取焦点,那么跑马灯的效果无法实现. 2.如果文本长度小于TextView的宽度, ...