JavaScript實作兩個select下拉方塊選項左移右移

本文介紹了JavaScript實作兩個select下拉方塊選項左移右移的程式碼，有興趣的同學可以參考一下本文

今天沒事用js寫了一個用兩個select下拉框之間能互相移動元素的小程序，剛開始學習javascript還有很多優化的地方。

Javascript程式碼

 

# 程式碼如下

#        #  /**選取的元素向右移動**/   functionmoveRight()   {              ///使用");     varoptionElements = selectElement.getElementsByTagName("option");     varlen = optionElements.length; ## if(!(selectElement.selectedIndex==-1)) //如果沒有選擇元素，那麼selectedIndex就為-1     {           個select物件       varselectElement2 = document.getElementById("secend");         ;len ;i++)         { #          selectElement2.appendChild(optionElements[select }else     {       alert("您尚未選擇需要移動的元素！");     }   }## /移動所有的到右邊   functionmoveAll()   {     //得到第一個select物件     varselectElement = document.getElementBy. ");     varoptionElements = selectElement.getElementsByTagName("option");     varlen = optionElements.length; o## #); #         //將第一個selected中的陣列翻轉     varfirstOption =newArray();     for(vark=len-1; --)     {       firstOption.push(optionElements[k]);      ## ;       //得到第二個select物件 #    varselectElement2 = document.getElementById("secend");    forfor(varj=lens-1> ;j--)     { #      selectElement2.appendChild(firstOption[j]);     }” #  //移動選取的元素到左邊   functionmoveLeft()   {   //先得到第二個select物件  = document.getElementById("secend"); #    varoptionElement = selectElement.getElementsByTagName("option");    #varlen = optionElement.leng; #           //再得到第一個元素     if(!(selectElement.selectedIndex==-1))#o varfirstSelectElement = document.getElementById("first"); #      for(i=0;i     selectedIndex]);//被選中的那個元素的索引       }     }else     {## 的項目!");     }   }        //全部向左移   functionmoveAllLeft()   { 1 varselectget "secend");     varoptionElements = document.getElementsByTagName("option");     varlen = optionElements.length;#c #  ##    for(vari=len-1;i>=0;i--)     {       optionEls.push(optionElements[i]);##    optionEls.push(optionElements[i]);##. ##    varlens = optionEls.length;        #    varfirstSelectElement =## ent.getElement =0;j--)     {       firstSelectElement.appendChild(optionEls[j]);      } #     上面是javascript程式碼，下面是html加css程式碼。 Html程式碼

# 程式碼如下

.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}

.select_move_1 { float:left;} ##  .select_move_1 { float:left;}   .select_move_1 { float:left;} select_ . }   .select_move_3 { float:left;}    < ;body>              #15 first"size="10"id="first"multiple="multiple">       寶馬 「豐田">豐田       奧迪    /option>       現代       賓士 #      法拉利                       " onclick="moveRight()"/> " onclick="moveRight()"/>         " onclick="moveAll()" /> ##  "value="                    # id="secend"multiple="multiple">              # <)/pc/lt; #

以上是JavaScript實作兩個select下拉方塊選項左移右移的詳細內容。更多資訊請關注PHP中文網其他相關文章！