zoukankan      html  css  js  c++  java

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

    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]);
        }
      };
    })();
     
     
  • 相关阅读:
    Mobile Widget——让开发移动应用就像做网页
    Qcon大会上电子工业出版社博文视点提供全程图书支持
    电子工业出版社PPT图书优秀作者上海书城讲座
    2天玩转单反相机引领时尚娱乐新生活
    Android开发之ADB使用
    交大研究生，就一个字牛
    程序员能力矩阵
    主流浏览器内核概览
    网站成功的三十三个法则
    Checkstyle, PMD, Findbugs对比
  • 原文地址：https://www.cnblogs.com/xuyang1995/p/6036952.html
Copyright © 2011-2022 走看看