• 点击按钮表单元素左右移动

    HTML

     
     
     
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>移动option</title>
      <style type="text/css">
        select {
           200px;
        }
    ​
        .box {
          float: left;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <select size="8" id="left-select">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">6</option>
          <option value="">7</option>
          <option value="">8</option>
        </select>
        <br>
        <button id="left_up">向上移动</button>
        <button>向下移动</button>
        <button id="right">向右移动</button>
        <button id="right_all">全部右移</button>
      </div>
      <div class="box">
        <select size="8" id="right-select">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">6</option>
          <option value="">7</option>
          <option value="">8</option>
        </select>
        <br>
        <button>向上移动</button>
        <button>向下移动</button>
        <button>向左移动</button>
        <button>全部左移</button>
      </div>
      <script src="./js/移动option.js"></script>
    </body>
     
    </html>

    javascript

     
     
     
     
     
    (function() {
      var leftSelect = document.getElementById('left-select');
      var rightSelect = document.getElementById('right-select');
      var leftUpBtn = document.getElementById('left_up');
      var rightBtn = document.getElementById('right');
      var rightAllBtn = document.getElementById('right_all');
    ​
      leftUpBtn.onclick = function() {
        var index = leftSelect.selectedIndex;
        // 如果在select中没有选中option，那么不会进行后续的操作
        if(index !== -1) {
          var option = leftSelect.options[index];
    ​
          if(index === 0) {
            leftSelect.appendChild(option);
          } else {
            leftSelect.insertBefore(option, leftSelect.options[index - 1]);
          }
        }
      };
    ​
      rightBtn.onclick = function() {
        var index = leftSelect.selectedIndex;
        if(index !== -1) {
          var option = leftSelect.options[index];
    ​
          rightSelect.appendChild(option);
        }
      };
    ​
      rightAllBtn.onclick = function() {
        for(var i = 0; i < leftSelect.options.length;) {
          rightSelect.appendChild(leftSelect.options[i]);
        }
      };
    })();
     
     
  • 相关阅读:
    SuperSocket中的Server是如何初Start的
    SuperSocket中的Server是如何初Initialize的
    Explicit Interface Implementation (C# Programming Guide)
    Interfaces (C# Programming Guide)
    Java泛型Restletclient
    jQuery 完成ajax传jsonObject数据，并在后台处理
    SDUT 2933-人活着系列Streetlights（最小生成树Kruskal+和理查德设置来实现）
    华为OJ:查找字符的第一个字符串只出现一次
    Linux查找多个类似，但不同的名称和重命名文件
    【Java收集的源代码分析】Hashtable源代码分析
  • 原文地址：https://www.cnblogs.com/xuyang1995/p/6036952.html
Copyright © 2020-2023  润新知