七、操作多选下拉列表

1、要实现的效果：

2、代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作多选下拉列表</title>
<style type="text/css">

</style></head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; ">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
    <td width="126">
       
       <select name="first" multiple="multiple" size=10 class="td3" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
       </select>
   </td>

<td width="69" valign="middle">
       <input name="add" id="add" type="button" class="button" value="-->" />
       <input name="add_all" id="add_all" type="button" class="button" value="==>" />
       <input name="remove" id="remove" type="button" class="button" value="<--" />
       <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
     </td>

<td width="127" align="left">
      <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
   </td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
/**********************************************************************/
   //1) 选中的从左端移到右端
   //<input name="add" id="add" type="button" class="button" value="-->" />
   document.getElementById("add").onclick=function(){
          //获取<select name="first" multiple="multiple" size=10 class="td3" id="first">
       var firstElement=document.getElementById("first");

       //获取option
       var optionElements=firstElement.getElementsByTagName("option");
       var len=optionElements.length;
       //alert(len)

       //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
       var secondElement=document.getElementById("second");

       //遍历option
       for(var i=0;i<len;i++){
           var optionElement=optionElements[i];
           /*
           * firstElement.selectedIndex:
           *   * 表示当前选中的option的索引值,从0开始
           *   * 如果没有被选中的，selectedIndex=-1
           *   * 如果有多个被选中,selectedIndex的值永远是第一个被选中的值
           *   * javaScript的数组是动态的数组,数组的长度是可变的,索引值也在变
           */

           if (firstElement.selectedIndex != -1) {
               alert(firstElement.selectedIndex);
               secondElement.appendChild(optionElements[firstElement.selectedIndex]);
           }
       }
   }
/**********************************************************************/
   //2) 全部从左端移到右端
   //<input name="add_all" id="add_all" type="button" class="button" value="==>" />
   document.getElementById("add_all").onclick=function(){
        var firstElement=document.getElementById("first");

       //获取option
       var optionElements=firstElement.getElementsByTagName("option");
       var len=optionElements.length;
       //alert(len)

       //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
       var secondElement=document.getElementById("second");
         for (var i = 0; i < len; i++) {
            secondElement.appendChild(optionElements[0]);
         }
      }

   //简化的
//   document.getElementById("add_all").onclick=function(){
//        var firstElement=document.getElementById("first");
//       var len=firstElement.length;
//       //alert(len)
//       var secondElement=document.getElementById("second");
//        for (var i = 0; i < len; i++) {
//            secondElement.appendChild(firstElement[0]);
//        }
//      }
/**********************************************************************/
//3) 双击的从左端移到右端    ondblclick：双击事件　　onclick：单机事件
/*   document.getElementById("first").ondblclick=function(){
       var firstElement=document.getElementById("first");
      var optionElements=firstElement.getElementsByTagName("option");
       //也可以直接写成：      var optionElements=this.getElementsByTagName("option"); this即表示document.getElementById("first");
      var secondElement=document.getElementById("second");
      for(var i=0;i<optionElements.length;i++){
           secondElement.appendChild(optionElements[firstElement.selectedIndex]);
      }
   }
*/

   //优化的
   document.getElementById("first").ondblclick=function(){
      var secondElement=document.getElementById("second");
      secondElement.appendChild(this[this.selectedIndex]);
   }
/**********************************************************************/
//4. 选中的从右端移到左端
//<input name="remove" id="remove" type="button" class="button" value="<--" />
document.getElementById("remove").onclick=function(){
      var secondElement=document.getElementById("second");
      var optionElements=secondElement.getElementsByTagName("option");
      var len=optionElements.length;

      var firstElement=document.getElementById("first");

      for(var i=0;i<len;i++){
       if(secondElement.selectedIndex!=-1){
           firstElement.appendChild(optionElements[secondElement.selectedIndex]);
       }
      }
}
/**********************************************************************/
//5. 全部的从右端移到左端
//<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
document.getElementById("remove_all").onclick=function(){
      var secondElement=document.getElementById("second");
      var optionElements=secondElement.getElementsByTagName("option");
      var len=optionElements.length;
      var firstElement=document.getElementById("first");
      for(var i=0;i<len;i++){
           firstElement.appendChild(optionElements[0]);
      }
}
/**********************************************************************/
//6. 双击的从右端移到左端
document.getElementById("second").ondblclick=function(){
      var firstElement=document.getElementById("first");
      firstElement.appendChild(this[this.selectedIndex]);
}
/**********************************************************************/
}
</script>
</html>

posted @ 2017-10-22 10:59 爱笑的berg 阅读(149) 评论(0) 收藏举报

刷新页面返回顶部

爱笑的berg

七、操作多选下拉列表

公告