JavaScript学习记录总结（九）——移动添加效果

<!DOCTYPE html>
<html>
<head>
<title>moveOption.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript">
   //声明全局变量
   var loptionDom; //左边的select对应的Dom对象
   var roptionDom; //右边的select对应的DOM对象
   //窗体加载完毕获取dom对象
   window.onload = function() {
       //获取左边的select对应的Dom对象
       loptionDom = document.getElementById("loption");
       //获取右边的select对应的DOM对象
       roptionDom = document.getElementById("roption");
   };
   //向右移动
   function moveRight(value) {
       //获取左边select所有的option集合对象
       var options = loptionDom.options;
       //判断是否是单个移动
       if (value == 1) {
           //记住要移动的option对象
           var remberoptionDom = null;
           //记住要移动的option的数量
           var count = 0;
           //遍历options集合对象
           for (var i = 0; i < options.length; i++) {
               //获取option对象
               var optionDom = options[i];
               //判断是否是选中的option对象selected="selected"
               if (optionDom.selected) {
                   //赋值
                   remberoptionDom = optionDom;
                   //数量递增
                   count++;
               }
           }

           //判断数量是否是1 如果是1代表移动一个
           if (count == 1) {
               //添加到了右边
               roptionDom.appendChild(remberoptionDom);
               //左边要移除
               loptionDom.removeChild(remberoptionDom);
           } else if (count == 0) {
               alert("请选择要移动的数据");
           } else {
               alert("请选择==>移动");
           }
       } else if (value == 0) {
           //遍历操作                为啥一定要写成    i=options.length-1 ; i>=0;i--
           for (var i = options.length - 1; i >= 0; i--) {
               //获取option对象
               var optionDom = options[i]; //options[0] //8
               //判断是否被选中
               if (optionDom.selected) {
                   //左边要移除
                   loptionDom.removeChild(optionDom);
                   //添加到了右边
                   roptionDom.appendChild(optionDom);
               }
           }
       }
   }
   //向左移动
   function moveLeft(value) {
       if (value == 1) {
       } else if (value == 0) {
       }
   }
</script>
</head>

<body>
   
   <div style="width: 400px; height: 280px;margin: 0px auto;">
       
       <div style="width: 100px; float:left;">
           <select multiple="multiple" style="height: 200px; width: 80px;"
               ></select>
       </div>

   </div>

</body>
</html>

效果：