JS实现左右下拉框动态增删

选中下拉框中的选项实现左移右移

效果：
效果图.gif
1. Html部分代码
<body>
<table align="center">
    <tr>
        <td ><select size="15" id="left" >
            <option>左1</option>
            <option>左2</option>
            <option>左3</option>
            <option>左4</option>
            <option>左5</option>
            <option>左6</option>
            <option>左7</option>
            <option>左8</option>
            <option>左9</option>
            <option>左10</option>
        </select></td>

        <td>
            <input type="button" value="MoveRight" onclick="moveRight()"><br>
            <input type="button" value="MoveAllRight" onclick="moveAllright()"/><br>
            <input type="button" value="MoveLeft" onclick="moveLeft()"><br>
            <input type="button" value="MoveAllLeft" onclick="moveAllLeft()"><br>
        </td>


        <td>
            <select size="15" id="right">
                <option>右1</option>
                <option>右2</option>
                <option>右3</option>
                <option>右4</option>
                <option>右5</option>
                <option>右6</option>
                <option>右7</option>
            </select>
        </td>

        <td></td>
    </tr>

    </table>

</body>
2. JavaScript脚本代码如下:
    <script type="text/javascript">
      function  moveRight()
      {
          //获取左边select元素节点
          var leftSelectNode = document.getElementById("left");
          //获取子元素节点数组
          //如果选定的索引号为-1,则提示用户
          if (leftSelectNode.selectedIndex == -1)
          {
              alert("请选定需要移动的选项");
              return;
          }
          //获取待移动的选项
          var waitSelection = leftSelectNode.options[leftSelectNode.selectedIndex];
          //获取右边的selec元素节点并加入
          var rightSelectNode = document.getElementById("right");
          //右边新增一个节点
          rightSelectNode.appendChild(waitSelection);

      }

      function  moveAllright()
      {//获取select对象
          var leftSelectNode = document.getElementById("left");
          var rightSelectNode = document.getElementById("right");

          var optionsNodes = leftSelectNode.options;

          var length = optionsNodes.length;
          for (var i = 0; i < length; i++)
          {
              rightSelectNode.appendChild(optionsNodes[0]);
          }
      }

      function  moveLeft()
      {
          //获取左边的select对象
        var rightSelectNode = document.getElementById("right");
        //没有选中则提示
          if (rightSelectNode.selectedIndex == -1)
          {
              alert("请选择一个选项");
              return;
          }
          //获取待移动的选项
          var waitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex];
          //获取左边的select对象
          var leftSelectNode = document.getElementById("left");

          //左边的select对象加入节点
          leftSelectNode.appendChild(waitMoveNode);

      }
      function  moveAllLeft()
      {
          //获取右边的select对象
          var rightSelectNode = document.getElementById("right");
          var leftSelectNode = document.getElementById("left");

         var length = rightSelectNode.options.length;

          //遍历其option选项并加入到左边的select中
          for (var i = 0; i < length; i++)
          {
              leftSelectNode.appendChild(rightSelectNode.options[0]);
          }
      }

    </script>
3.CSS简单代码如下:
    <style>
        select, td
        {
            font:20px/40px '宋体';
        }
        option  {width: 100px;
            font:20px/40px '宋体';
        }
        input {
            padding: 3px;
            font:20px/40px '宋体';
            text-align: center;
            width: 130px;
            height: 40px;
            background-color: orange;
        }
    </style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容