本文介紹了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}
//全部向左移 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_1 { float:left;} ## .select_move_1 { float:left;} .select_move_1 { float:left;}select_ . } .select_move_3 { float:left;}
< ;body>
" onclick="moveRight()"/> ## "value="<------"onclick="moveLeft()"/>
# <)/pc/lt; # 相關推薦: |
以上是JavaScript實作兩個select下拉方塊選項左移右移的詳細內容。更多資訊請關注PHP中文網其他相關文章!