網頁

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選項名稱
typeselect類型,單選傳回select-one,複選select-multiple

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

form表單之option元素屬性
名稱說明
text存取選擇文字
defaultSelectedoption預設選項,即selected屬性
indexoption陣列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;
} 

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。