js中，表單中的選擇框?qū)W習(xí)與使用總結(jié)

 選擇框腳本

選擇框是通過<select>和<option>元素來創(chuàng)建。下面從對選擇框的幾個操作，來學(xué)習(xí)，總結(jié)Js中操作選擇框的方法

一．選擇選項

     （1）只允許選擇一項的選擇框，訪問選項中的最簡單方式，就是使用選擇框的selectIndex屬性。

  selectedIndex 屬性可設(shè)置或返回下拉列表中被選選項的索引號。設(shè)置selectedIndex會導(dǎo)致取消以前的所有選項并選擇指定的那一項，而讀取selectedIndex則只會返回選中項第一項的索引值。注意：若允許多重選擇，則僅會返回第一個被選選項的索引號。

   用法：selectObject.selectedIndex=number

（2）取得對某一項的引用，然后將其selected屬性設(shè)置為true,與selectedIndex不同，在允許多選的選擇框中設(shè)置選項的selected屬性，不會取消對其他選中項的選擇，因而可以動態(tài)選中任意多個項

     例子：

window.onload=function(){
var btnobj=document.getElementById("btn");
    btnobj.addEventListener("change",function(){  
var index=btnobj.selectedIndex;
var imgurl=["img/bg3.jpg","img/bg2.jpg","img/bg4.jpg","img/bg5.jpg"];
var text=btnobj.options[index].text;//獲得select選項中的文本值
 //使用selected屬性設(shè)置為true，來選擇選項
    if(btnobj.options[index].selected){ changeskin(imgurl[index]);}
  //使用selectedIndex屬性來選擇選項，進行相應(yīng)處理，本例子是用來通過選項選擇，來換背景圖片
  /* if(index==0){changeskin(imgurl[index]);}  
     if(index==1){ changeskin(imgurl[index]);}
     if(index==2){ changeskin(imgurl[index]);}
     if(index==3){ changeskin(imgurl[index]);}*/


},false);
}

二.添加選項：

     （1）使用DOM方式創(chuàng)建：

      var btnobj=document.getElementById("btn");
    btnobj.addEventListener("change",function(){
             var newoption=document.createElement("option");
    newoption.appendChild(document.createTextNode("新增的選項"));
    btnobj.appendChild(newoption);
},fasle)
}

（2）使用option構(gòu)造函數(shù)來創(chuàng)建新選項

 var btnobj=document.getElementById("btn");
    btnobj.addEventListener("change",function(){
               var newoption1= new Option("新增的選項");
       btnobj.appendChild(newoption1);
},false)
}

（3）使用選擇框的add()方法

        該方法需要兩個參數(shù)，第一個參數(shù)為要添加的新選項，第二參數(shù)為新選項之后的選項，若是想在列表的最后添加一個選項，應(yīng)該將第二個參數(shù)設(shè)置為null.

 var btnobj=document.getElementById("btn");
     btnobj.addEventListener("change",function(){
               var newoption2= new Option("新增的選項");
       btnobj.add(newoption2,undefined);
},false);
}

三者實現(xiàn)的效果圖：

三．移除選項

     （1）使用DOM的removeChild()方法，參數(shù)為要移除的選項

      //使用removeChild()移除選項
        var btnobj=document.getElementById("btn");
            btnobj.addEventListener("change",function(){
            btnobj.removeChild(btnobj.options[2]);
},fasle)
}

    （2）使用選擇框的remove()方法，參數(shù)為：要移除的索引

  var btnobj=document.getElementById("btn");
      btnobj.addEventListener("change",function(){
              //使用remove方法移除
              btnobj.remove(2);
},false);
}

移除選項，實現(xiàn)效果圖：

        四．移動和重排選項

     （1）移動：appendChild()方法，可以將第一個選項框中的選項直接移動到第二個選擇框中，該方法是先從一個選項框中的父元素節(jié)點中移除它，再把它添加到指定的位置。

       var btnobj=document.getElementById("btn");
       var btnobj1=document.getElementById("btn1");
      btnobj.addEventListener("change",function(){                   
        btnobj1.appendChild(btnobj.options[1]);

},false);
}

    移動選項與移除選項，有一個共同之初，就是會重置每一個選項的index屬性

重新排序：使用DOM方法中的insertBefore();appendChild()方法只適用與將選項添加到選擇框的最后。

window.onload=function(){
var btnobj=document.getElementById("btn");
var optionnew=btnobj.options[3];
var optiontarget=btnobj.options[2];         
    btnobj.insertBefore(optionnew, optiontarget);}

 五.總結(jié):

    對于本例子的完整實現(xiàn)效果，請看《select使用小demo》一文。通過這些基本知識學(xué)習(xí)，再結(jié)合之前的cookie技術(shù)，后期準(zhǔn)備實現(xiàn)定制頁面。網(wǎng)站可以提供了換膚或更換布局的功能，使用cookie來記錄用戶的選項，例如：背景主題。當(dāng)用戶下次訪問時，仍然可以保存上一次訪問的界面風(fēng)格。