18-选择水果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width:200px;
            height: 200px;
            background-color: #33cccc;
            font-size: 20px;
        }
    </style>
</head>
<body>
  <select id="all" multiple="multiple">
    <option>苹果</option>
    <option>橘子</option>
    <option>梨</option>
    <option>西瓜</option>
    <option>水蜜桃</option>
  </select>

  <input type="button" value=">>" id="btn1">
  <input type="button" value="<<" id="btn2">
  <input type="button" value=">" id="btn3">
  <input type="button" value="<" id="btn4">

  <select id="select" multiple="multiple">
    
  </select>
  
  <script src="common.js"></script>
  <script>
    var all = my$('all');
    var select = my$('select');
    // 1 全部选择
    my$('btn1').onclick = function () {
      // 错误的 因为 children中的项被移走之后，索引会重新排列
      // for (var i = 0; i < all.children.length; i++) {
      //   var option = all.children[i];
      //   select.appendChild(option);
      // }
      // 
      // 水果的顺序发生变化
      // for (var i = all.children.length - 1; i >= 0; i--) {
      //   var option = all.children[i];
      //   select.appendChild(option);
      // }
      // 
      // 
      // 先获取子元素的个数，将来再发生变化不会受影响
      // 现在len的值始终是当前获取到的all.children.length 当前个数5
      var len = all.children.length;
      for (var i = 0; i < len; i++) {
        var option = all.children[0];
        select.appendChild(option);
      }
    }

    // 3 移动选中的水果
    my$('btn3').onclick = function () {
      // 找到所有选中的option
      var array = []; // 存储选中的option
      for (var i = 0; i < all.children.length; i++) {
        var option = all.children[i];
        if (option.selected) {
          array.push(option);
          // 去掉当前option的选中效果
          option.selected = false;
        }
      }

      // 把数组中的option移动到第二个select中
      for (var i = 0; i < array.length; i++) {
        var option = array[i];
        select.appendChild(option);
      }
    }
  </script>
</body>
</html>
posted @ 2020-02-18 15:34  阳神  阅读(115)  评论(0)  编辑  收藏  举报