JavaScript - 表單元素 - select and option Element

select元素與option元素

select物件就是<select>，其中disabled、form、name、tabIndex、type、value等屬性和input物件相同。

form表單之select元素屬性

名稱	說明
length	取得共有多少<option>
multiple	設定或取得選擇是否複選，true為多選
options	取得option物件集合，這是一個Array
selectedIndex	傳回選擇的選項index值，這是options的Index值
size	設定欄位為下接式或清單，size大於1是清單方塊
text	選項名稱
type	select類型，單選傳回select-one，複選select-multiple

• options 陣列的index由0開始。例如，SB.options[2]表示<select>中的第3項。
• selectedIndex，例如，SB.options[selectedIndex].value;

form表單之option元素屬性

名稱	說明
text	存取選擇文字
defaultSelected	option預設選項，即selected屬性
index	option陣列index位置，以0開始
label	設定或取得選項說明文字
selected	是否被選取，true為選取

取得<select>選取值

function getSelectValue(selectName){
  var objForm = document.forms["form1"];
  //取得對應的select
  var SB = document.elements[selectName]; 
  if (SB.type = "select-one") { 
    //單選
    var Choice = SB.selectedIndex;
    alert("Your Choice" + SB.options[Choice].text);
  }
  else {
    //複選
    var Choice = new Array;
    for (var i=0,len=SB.options.length; i<len;i++){
      if (SB.options[i].selected)
        Choice.push(SB.options[i].text);
    }
    alert("Your Choice" + Choice.join());
  }
} 

新增、替代、刪除<option>

使用Option()建構式直接新增，例如，

var addOption = new Option(text, value, defaultSelected, selected); 

defaultSelected與selected預設為0(false)，可不設定。通常會將<select>清單的length直接設定為新選項，即最後一項。例如，

SB.options[SB.options.length] = addOption; 

將以上程式為一支副程式，

function addOption(selectName, optionIndex) {
  var objForm = document.forms["form1"];
  var SB = objForm.elements[selectName];
  var addOP = new Option("金剛", "King Kong");
  //處理IE相容性
  //先新增，再移動到指定Index
  SB.options[SB.options.length] = addOP;
  SB.insertBefore(addOP, SB.options[optionIndex]);
} 

替代，取代某一置位(index)的option，例如，

SB.options[selectIndex] = addOption; 

刪除，刪除某一置位(index)的option，例如，

// 設定某一index為null即刪除
SB.options[selectIndex] = null; 

將以上程式整理成一支副程式，

function removeOption(selectName, optionIndex){
  var objForm = document.forms["form1"];
  var SB = objForm.elements[selectName];
  SB.options[optionIndex] = null;
}