Déplacer la listbox vers la gauche et la droite en fonction des compétences javascript

Déplacer la listbox vers la gauche et la droite en fonction des compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:17:03

original

1141 Les gens l'ont consulté

L'exemple de cet article explique le code détaillé du déplacement de la listbox vers la gauche et la droite en JavaScript et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

Rendu :

Code spécifique :

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>listbox左右移动</title> 
</head> 
 
<body> 
 
<div style="background-color:#CCC; width:450px; height:300px; margin:150px,0,0,450px; border:1px solid"> 
  <table align="center" width="285" height="169" bgcolor="#99CCFF"> 
  <tr> 
   <td width="100"> 
    <select name="first" id="first" size="10" multiple="multiple" style="background-color:#3FC;"> 
     <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="85" valign="middle"> 
    <input name="add" id="add" type="button" value="--->"/> 
    <input name="add_all" id="add_all" type="button" value="===>"/> 
    <input name="remove" id="remove" type="button" value="<---"/> 
    <input name="remove_all" id="remove_all" type="button" value="<==="/> 
   </td> 
   <td width="100" align="left"> 
    <select name="second" id="second" size="10" multiple="multiple" style="background-color:#3FC;"> 
    <option value="选项9">选项9</option> 
    </select> 
   </td> 
  </tr> 
  </table> 
</div> 
 
</body> 
<script type="text/javascript"> 
 //左移右 
  
  /*<input name="add" id="add" type="button" value="--->"/>*/ 
  document.getElementById("add").onclick = function add() 
  { 
   var firstSel = document.getElementById("first"); 
   var option = firstSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   var secondSel = document.getElementById("second"); 
   for(i=0;i<oplength;i++) 
   { 
     /* 
      selectedIndex: 该下标返回下拉列表的索引值 
      注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个 
         如果没有被选中的情况下，返回-1 
         selectedIndex是<select>的属性 
     */ 
     if(firstSel.selectedIndex!=-1) 
     { 
       secondSel.appendChild(option[firstSel.selectedIndex]); 
     } 
   } 
    
  } 
   
  /*<input name="add_all" id="add_all" type="button" value="===>"/>*/ 
  document.getElementById("add_all").onclick = function addAll() 
  { 
   var firstSel = document.getElementById("first"); 
   var option = firstSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   var secondSel = document.getElementById("second"); 
   for(i=0;i<oplength;i++) 
   { 
    /*因为javascript的数组是动态数组，长度是可以变的。所以当移走全部把数 
    组的值移走（一个一个的移走，数组长度马上-1，所以数组下标也是-1.因次我们要把每次移的是走下标为0的那个 
    数，这样才保证可以全部移走）*/ 
    secondSel.appendChild(option[0]); 
   } 
  } 
   
  /*双击后把option移到右边*/ 
  document.getElementById("first").ondblclick = function dblclick() 
  { 
    /*方法一*/ 
    /* 
   var firstSel = document.getElementById("first"); 
   var option = firstSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   var secondSel = document.getElementById("second"); 
   for(i=0;i<oplength;i++) 
   { 
      //双击可以看成：第一次点击选中，第二次点击移动 
      secondSel.appendChild(option[firstSel.selectedIndex]);   
   } 
   */ 
    
   /*方法二*/ 
   /* 
   this: this表示document.getElementById("first")  下拉列表 
      this.selectedIndex表示下拉列表选中的项 
   */ 
    var secondSel = document.getElementById("second"); 
    secondSel.appendChild(this[this.selectedIndex]); 
  } 
   
   
   
   
  //右移左 
   
   
  /*<input name="remove" id="remove" type="button" value="<---"/>*/ 
  document.getElementById("remove").onclick = function remove() 
  { 
   var secondSel = document.getElementById("second"); 
   var firstSel = document.getElementById("first"); 
   var option = secondSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   for(i=0;i<oplength;i++) 
   { 
     /* 
      selectedIndex: 该下标返回下拉列表的索引值 
      注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个 
         如果没有被选中的情况下，返回-1 
         selectedIndex是<select>的属性 
     */ 
     if(secondSel.selectedIndex!=-1) 
     { 
       firstSel.appendChild(option[secondSel.selectedIndex]); 
     } 
   } 
    
  } 
   
  /*<input name="remove_all" id="remove_all" type="button" value="<==="/>*/ 
  document.getElementById("remove_all").onclick = function remove_all() 
  { 
   var secondSel = document.getElementById("second"); 
   var firstSel = document.getElementById("first"); 
   var option = secondSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   for(i=0;i<oplength;i++) 
   { 
    /*因为javascript的数组是动态数组，长度是可以变的。所以当移走全部把数 
    组的值移走（一个一个的移走，数组长度马上-1，所以数组下标也是-1.因次我们要把每次移的是走下标为0的那个 
    数，这样才保证可以全部移走）*/ 
    firstSel.appendChild(option[0]); 
   } 
  } 
   
  /*双击后把option移到右边*/ 
  document.getElementById("second").ondblclick = function dblclick() 
  { 
    /*方法一*/ 
    /* 
   var secondSel = document.getElementById("second"); 
   var firstSel = document.getElementById("first"); 
   var option = secondSel.getElementsByTagName("option"); 
   //javascript的数组是动态数组，长度是可以变的。 
   //所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg 
   var oplength=option.length; 
   for(i=0;i<oplength;i++) 
   { 
      //双击可以看成：第一次点击选中，第二次点击移动 
      firstSel.appendChild(option[secondSel.selectedIndex]);   
   } 
   */ 
    
   /*方法二*/ 
   /* 
   this: this表示document.getElementById("second")  下拉列表 
      this.selectedIndex表示下拉列表选中的项 
   */ 
    var firstSel = document.getElementById("first"); 
    firstSel.appendChild(this[this.selectedIndex]); 
  } 
</script> 
</html>

Copier après la connexion

Les commentaires du code sont très détaillés, j'espère que cela pourra aider tout le monde.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.