suchen

Heim >Web-Frontend >js-Tutorial >Beispielcode-Freigabe mit JavaScript zur Implementierung von zwei Auswahl-Dropdown-Box-Optionen zum Verschieben nach links und rechts

Beispielcode-Freigabe mit JavaScript zur Implementierung von zwei Auswahl-Dropdown-Box-Optionen zum Verschieben nach links und rechts

黄舟
黄舟Original
2017-03-21 14:49:072135Durchsuche

In diesem Artikel wird hauptsächlich JavaScript vorgestellt, um die Funktion zum Verschieben zweier ausgewählter Dropdown-Box-Optionen nach links und rechts zu realisieren, und js, um die Bewegung von Dropdown-Box-Elementen zueinander zu realisieren Referenzwert. Interessierte Freunde können als Referenz dienen

Heute hatte ich nichts zu tun und habe ein kleines Programm mit js geschrieben, das Elemente zwischen zwei ausgewählten Dropdown-Feldern verschieben kann, und es gibt immer noch viele Optimierungsbereiche.

Javascript-Code

<script type="text/javascript"> 
 
   
  /**选中的元素向右移动**/ 
  function moveRight() 
  { 
     
      //得到第一个select对象 
    var selectElement = document.getElementById("first"); 
    var optionElements = selectElement.getElementsByTagName("option"); 
    var len = optionElements.length; 
   
 
    if(!(selectElement.selectedIndex==-1))  //如果没有选择元素，那么selectedIndex就为-1 
    { 
       
      //得到第二个select对象 
      var selectElement2 = document.getElementById("secend"); 
   
        // 向右移动 
        for(var i=0;i<len ;i++) 
        { 
          selectElement2.appendChild(optionElements[selectElement.selectedIndex]); 
        } 
    } else 
    { 
      alert("您还没有选择需要移动的元素！"); 
    } 
  } 
   
  //移动所有的到右边 
  function moveAll() 
  { 
    //得到第一个select对象 
    var selectElement = document.getElementById("first"); 
    var optionElements = selectElement.getElementsByTagName("option"); 
    var len = optionElements.length; 
    //alert(len); 
   
    //将第一个selected中的数组翻转 
    var firstOption = new Array(); 
    for(var k=len-1;k>=0;k--) 
    { 
      firstOption.push(optionElements[k]); 
   
    } 
    var lens = firstOption.length; 
      //得到第二个select对象 
    var selectElement2 = document.getElementById("secend"); 
    for(var j=lens-1;j>=0;j--) 
    { 
      selectElement2.appendChild(firstOption[j]); 
    } 
  } 
   
  //移动选中的元素到左边 
  function moveLeft() 
  { 
    //首先得到第二个select对象 
    var selectElement = document.getElementById("secend"); 
    var optionElement = selectElement.getElementsByTagName("option"); 
    var len = optionElement.length; 
     
    //再次得到第一个元素 
    if(!(selectElement.selectedIndex==-1)) 
    { 
      var firstSelectElement = document.getElementById("first"); 
      for(i=0;i<len;i++) 
      { 
        firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被选中的那个元素的索引 
      } 
    }else 
    { 
      alert("您还没有选中要移动的项目!"); 
    } 
  } 
   
  //全部向左移 
  function moveAllLeft() 
  { 
    var selectElement = document.getElementById("secend"); 
    var optionElements = document.getElementsByTagName("option"); 
    var len = optionElements.length; 
    var optionEls = new Array(); 
    for(var i=len-1;i>=0;i--) 
    { 
      optionEls.push(optionElements[i]); 
    } 
    var lens = optionEls.length; 
     
    var firstSelectElement = document.getElementById("first"); 
    for(var j=lens-1;j>=0;j--) 
    { 
      firstSelectElement.appendChild(optionEls[j]); 
    } 
  } 
</script>

Das Obige ist der Javascript-Code und das Folgende ist der HTML- und CSS-Code.

Html-Code

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
  .select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;} 
  .select_move_1 { float:left;} 
  .select_move_2 { float:left;} 
  .select_move_3 { float:left;} 
</style> 
</head> 
 
<body> 
  <p class="select_move"> 
   
    <p class="select_move_1"> 
     <select name="first" size="10" id="first" multiple="multiple"> 
      <option value="宝马">宝马</option> 
      <option value="丰田">丰田</option> 
      <option value="奥迪">奥迪</option> 
      <option value="凯迪拉克">凯迪拉克</option> 
      <option value="现代">现代</option> 
      <option value="奔驰">奔驰</option> 
      <option value="法拉利">法拉利</option> 
       
     </select> 
    </p> 
     <p class="select_move_2"> 
        <input type="button" value="------>" onclick="moveRight()"/><br /> 
        <input type="button" value="===>" onclick="moveAll()" /><br /> 
        <input type="button" value="<------" onclick="moveLeft()"/><br /> 
        <input type="button" value="<===" onclick="moveAllLeft()"/> 
     </p> 
    <p class="select_move_3"> 
       <select size="10" id="secend" multiple="multiple"> 
       </select> 
    </p> 
  </p> 
   
</body> 
</html>

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe mit JavaScript zur Implementierung von zwei Auswahl-Dropdown-Box-Optionen zum Verschieben nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScriptNächster Artikel：Detaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScript

In Verbindung stehende Artikel

Mehr sehen