这是我用 javascript 制作的“Dual listbox”(双向选择器)的一个应用示例

转载 2007年10月10日 15:23:00
这是我用 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)  file://源:没有点选任何项目
     return;

   if (sel_source.options[0].text=="无") file://源:只有“无”项目
     return;


   if (sel_dest.options[0].text=="无") file://目标:只有“无”项目,则先删除该提示性项目
     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)  file://源:如果删除完所有有用项目,则添加提示项目:“无”
     sel_source.options.add(new Option("无"));
   }

   function MoveAllItems(sel_source, sel_dest)
   {
     if (sel_source.options[0].text=="无") file://源:只有“无”项目
     return;

     if (sel_dest.options[0].text=="无")   file://目标:只有“无”项目,则先删除该提示性项目
     sel_dest.options.remove(0);

   file://首先拷贝所有项目到目标:
   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));
   }


   file://然后删除“源”所有项目:
   while ((k=sel_source.length-1)>=0)
   {
     if (sel_source.options[0].text=="无") file://源:只有“无”项目
       break;
     sel_source.options.remove(k);
     if (sel_source.options.length==0)  file://源:如果删除完所有有用项目,则添加提示项目:“无”
       sel_source.options.add(new Option("无"));
   }
   }

   function SelectAll(theSel)  file://选中select中全部项目
   { for (i = 0 ;i<theSel.length;i++)
      theSel.options[i].selected = true;
   }
  </script>

 

C++ LISTBOX控件常见用法(转)

1. 属性列表:     SelectionMode    组件中条目的选择类型,即多选(Multiple)、单选(Single)     Rows             列表框中显示总共多少行...
  • u012425536
  • u012425536
  • 2014年03月10日 08:54
  • 2060

bootstrap的多选下拉框的使用

本文简单的列出了bootstrap的两个下拉选项框:multiselect和duallistbox,介绍简单,如有需要可参看具体官方文档...
  • u014155400
  • u014155400
  • 2015年09月15日 18:50
  • 5773

C#之WinForm基础 未选择状态下的listbox的selectindex是-1

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 1、UI 2、代码 using System; usin...
  • yushaopu
  • yushaopu
  • 2016年09月21日 17:42
  • 1542

jquery双向选择器代码

  • 2014年08月25日 17:31
  • 53KB
  • 下载

双向选择器

  • 2006年02月23日 09:05
  • 4KB
  • 下载

基于bootstrap的双向选择器

  • 2018年01月09日 15:30
  • 58KB
  • 下载

双向选择器

  • 2017年08月14日 11:04
  • 60KB
  • 下载

jquery 双向选择器之改进版

记得之前发表过一篇《Jquery简单应用总结》,最后有一个自己做的列表双向选择器,感觉有点挫,昨天闲着没事改进了一下,把元素改成了select option这样就支持shift多选,代码量也精简了些。...
  • rain082900
  • rain082900
  • 2013年08月09日 11:45
  • 1293

ListBox实现双向选择

  • 2011年09月14日 09:38
  • 2KB
  • 下载

安卓双向范围取值选择器,双向选择进度条,单向选择进度条自定义视图View实现

1背景 需求要做一个时间选择器,所以自已写了一个,同时又需要做一个相同UI的单值取值拖动进度条,这个用系统的组件也很好实现,但是要两个控件实现相同的UI那还是集成在一个控件里方便,由感而写了这么一样...
  • u012990509
  • u012990509
  • 2017年05月17日 10:51
  • 575
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:这是我用 javascript 制作的“Dual listbox”(双向选择器)的一个应用示例
举报原因:
原因补充:

(最多只允许输入30个字)