利用javascript和dhtml实现两个列表框中内容的移动_利用javascript实现两个列表框中内容的移动-优快云博客

本文介绍了一个使用JavaScript实现的两个列表框之间的数据互相传递的示例。通过点击按钮，可以将列表框1中选定的项移至列表框2，反之亦然。此功能常见于用户界面设计，用于方便地管理和选择数据项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出处:http://hi.baidu.com/dovebo/blog/item/2fe2da43fa437c1373f05de4.html

<table width=400 align=center border=0>

   <tr>

     <td width=40% align=center>

         列表一

     </td>

     <td width=20% align=center>

         操作

     </td>

     <td width=40% align=center>

         列表二

     </td>

   </tr>

   <tr>

      <td width=40% align=center>

          <form name=form1>

            <select size=10  name=select1 MULTIPLE>

              <option value=1>Sample string 1</option>

              <option value=2>Sample string 2</option>

              <option value=3>Sample string 3</option>

              <option value=4>Sample string 4</option>

              <option value=5>Sample string 5</option>



            </select>

          </form>

      </td>

      <td valign=middle width=20% align=center>

          <br>

          <br>

           <input type=button name=btnGoLeft onclick="Go_Left();" value="<<">

          <br>

          <br>

           <input type=button name=btnGoRight onclick="Go_Right();" value=">>">

          <br>

          <br>

      </td>

      <td width=40% align=center>

          <form name=form2>

            <select size=10 length=40 name=select2 MULTIPLE >

           </select>

          </form>

      </td>

  </tr>

</table>

<script language=javascript>

  //将列表框1中的选定部分移到列表框2中

  function Go_Left()

     {



       for (i=0 ; i<=form2.select2 .options .length -1 ; i++)

          {

            //如果这条被选中则复制倒列表框1中

            if (form2.select2 .options [i].selected)

              {

                var element = window.Option.create (form2.select2.options [i].text,

                               form2.select2 .options[i].value,0);

                form1.select1.add (element);

              }



          }

       var j = 0 ;



       //删除选定记录

       for (i=0 ; i< form2.select2 .options .length ; i++)

          {

            if (form2.select2 .options [i].selected)

              {

                form2.select2.remove(i);

                i = i - 1 ;

              }



          }

    }



  //将列表框2中的选定部分移到列表框1中

  function Go_Right()

     {

       for (i=0 ; i<=form1.select1 .options .length -1 ; i++)

          {

            if (form1.select1 .options [i].selected )

              {

                var element = window.Option.create (form1.select1.options [i].text,

                               form1.select1 .options[i].value,0);

                form2.select2.add (element);

              }



          }

       for (i=0 ; i< form1.select1 .options .length ; i++)

          {

            if (form1.select1 .options [i].selected )

              {

                form1.select1.remove(i);

                i = i - 1 ;

              }



          }





     }



</script>