Javascript - option物件

名稱 類形 說明
option 物件 在Javascript中Option物件代表<select>元素中的單一<option>選項，我們可以對它進行新增、刪除、替換等一系列操作，尤其是與資料庫鎖定的下拉式功能表。下列為動態新增選項的語法，這樣的建構函數可以直接新增value、text等資訊： 
var myOption = new Option([text], [value], [defaultSelected], [selected])
語法中的參數全部都是非必須的，但通常在呼叫new Option()的時候前兩參數是要被定義的；以下為參數說明：
  • text: 設定選項的文字的字串
  • value: 設定選項value值的字串
  • defaultSelected: 設定是否選項的狀態為預設選取的Boolean值，該值預設為0，其效果和設置defaultSelected屬性相同
  • selected: 設定是否選項的狀態為選取的Boolean值，該值預設為0，其效果和設置selected屬性相同
範例1，取代和新增選項： 
<form>
	<select multiple="multiple" size="5">
		<option value="ball">option 01</option>
		<option value="music">option 02</option>
		<option value="climb">option 03</option>
	</select>
</form>
<script>
	var select01 = document.forms[0].elements[0];
	select01.options[0] = new Option('取代第一個選項','replace first option');
	select01.options[select01.length] = new Option('新增的選項','new option',1,1);
</script>
範例2，在指定的位置插入選項： 
<form>
	<select multiple="multiple" size="5">
		<option value="ball">option 01</option>
		<option value="music">option 02</option>
		<option value="climb">option 03</option>
	</select>
</form>
<script>
	var select01 = document.forms[0].elements[0];
	var insertion = new Option('新的Option','new option');
	select01.insertBefore(insertion,select01.options[2]);
</script>
上範例我們用了DOM的insertBefore()方法將新的選項插入指定的位置，這樣的寫法正常無誤，但在IE8(含)以下的版本卻出現了bug，指定的位置會確實會新增一個選項，value值也正常，但唯獨文字內容無法正確產生，導致該選項變成空白的選項，這個問題可以透過先插入選項，再將其插入指定位置的方法來改寫，一切就會正常，如下範例(3)。
範例3，修正範例(2)的IE bug： 
var select01 = document.forms[0].elements[0];
var insertion = new Option('新的Option','new option');
select01.options[select01.length] = insertion; //先將insertion置於最後一個選項
select01.insertBefore(insertion,select01.options[2]);
範例4，刪除某個選項： 
var select01 = document.forms[0].elements[0];
select01.options[1] = null;
由上例看到，刪除某個選項只要將它指派為空值(null)就可以了，非常簡潔。

範例5，清空所有的選項： 
document.myform.master.options.length=0;
補充說明：It serves as an alternate method of adding/removing options to select.add() and select.remove(), with the main benefit being it works in all browsers out of the box, including in very old, non DOM2 legacy browsers.
defaultSelected 屬性 A Boolean specifying whether this option is initially selected.
form 屬性 指向表單元素所在的<form>
index 屬性 Returns the index of this option within the select.options[] property.
selected 屬性 布林值，表示選項<option>是否被選中。
在select物件的selectedIndex屬性中有介紹過如何拜訪使用者選中的項目，但該做法只能用在單選的選單上，下範例(1)則利用selected屬性示範在多選的情況下如何拜訪多個選項： 
<form>
	選擇您的興趣：<br>
	<select multiple="multiple" size="6">
		<option value="ball">球類運動</option>
		<option value="music">聽音樂</option>
		<option value="climb">登山健行</option>
		<option value="game">電玩遊戲</option>
		<option value="movies">電影欣賞</option>
		<option value="bike">自行車運動</option>
		<option value="literature">文學閱讀</option>
		<option value="art">美術</option>
		<option value="extrame">極限運動</option>
	</select><br>
	<button>顯示選擇的項目</button>
</form>
<script>
	var select01 = document.forms[0].elements[0];
	var button01 = document.forms[0].elements[1];
	button01.onclick = function(){
		var choices = new Array();
		for(var i=0;i<select01.options.length;i++){
			if(select01.options[i].selected){
				choices.push(select01.options[i].text);
			}
		}
		alert(choices.join(' | '));
		return false;
	}
</script>
Boolean that specifies whether this option is currently selected. The following looks through all OPTIONs within a SELECT to see which one is selected (assumes only 1 can be selected at any time).
Example(s): 
var myselect=document.getElementById("sample")
for (var i=0; i<myselect.options.length; i++){
 if (myselect.options[i].selected==true){
  alert("Selected Option's index: "+i)
  break
 }
}
text 屬性 選項的文字。
Specifies the text for the option.
value 屬性 存/取表單元素value屬性的值
Specifies the value for the option.