美文网首页
移动select中的option到另一个select中

移动select中的option到另一个select中

作者: 王远清orz | 来源:发表于2019-10-22 16:35 被阅读0次
<style>
    select{
      width: 100px;
      height: 200px;
    }
  </style>
<body>
  <select name="" id="all" multiple>
    <option value="">苹果</option>
    <option value="">橘子</option>
    <option value="">橙子</option>
    <option value="">香蕉</option>
    <option value="">榴莲</option>
  </select>
  <input type="button" name="" id="btn1" value=">>">
  <input type="button" name="" id="btn2" value="<<">
  <input type="button" name="" id="btn3" value=">">
  <input type="button" name="" id="btn4" value="<">
  <select name="" id="select" multiple>

  </select>
  <script src="js/common.js"></script>
  <script>
    var btn1 = my$('btn1'),
        btn2 = my$('btn2'),
        btn3 = my$('btn3'),
        btn4 = my$('btn4'),
        all  = my$('all'),
        select = my$('select');

    // 1.全部选择
    btn1.onclick = function () {
      // 获取all中所有的option

      // 错误的,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);
      // }

      // 先取出all.children的个数
      var len = all.children.length;
      for(var i = 0; i < len; i++){
        var option = all.children[0];
        select.appendChild(option);
        // 去掉当前option的selected效果
        option.selected = false;
      }

      // 如果使用innerHTML这种方法移动子元素，子元素如果有事件，事件会丢失
      select.innerHTML = all.innerHTML;
      // 如果使用innerHTML去清空子元素，子元素如果有事件，会发生内存泄露（事件未被清楚）
      all.innerHTML = '';
    }

    btn2.onclick = function () {
      var len = select.children.length;
      for (var i = 0; i < len; i++) {
        var option = select.children[0];
        all.appendChild(option);
        // 去掉当前option的selected效果
        option.selected = false;
      }
    }

    //2.移动选中的按钮
    btn3.onclick = function () {
      // 找到所有选中的option
      // 存储选中的option
      var array = [];
      for( var i = 0; i<all.children.length;i++){
        var option = all.children[i];
        if(option.selected === true){
          array.push(option);
          // 去掉当前option的selected效果
          option.selected = false;
        }
      }
      // 把数组中的option移动到select中
      for( var i=0;i<array.length;i++){
        option = array[i];
        select.appendChild(option);
      }
    }

    btn4.onclick = function () {
        // 找到所有选中的option
        // 存储选中的option
        var array = [];
        for (var i = 0; i < select.children.length; i++) {
          var option = select.children[i];
          if (option.selected === true) {
            array.push(option);
            // 去掉当前option的selected效果
            option.selected = false;
          }
        }
        // 把数组中的option移动到select中
        for (var i = 0; i < array.length; i++) {
          option = array[i];
          all.appendChild(option);
        }
      }
  </script>
</body>

相关文章