用 Javascript 实现的“Dual listbox”(双向选择器)

时间：2023-03-09 19:08:03
用 Javascript 实现的“Dual listbox”(双向选择器)

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