点击按钮表单元素左右移动-白红宇

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

阅读量：6590 次

发布时间：2019-06-24

本文共 1355 字，大约阅读时间需要 4 分钟。

HTML

移动option

   select {

     width: 200px;

   .box {

     float: left;

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]);
   }
};
})();