此處只講 SELECT 元素物件特有的方法,其它方法請參考 element 物件。
增加選項。其語法是:
SELECT元素物件.add( 新元素物件 [, 指標])
新元素要用 createElement() 產生。未設指標時,新元素會被加在尾端。
移除指標所在的選項。其語法是:
SELECT元素物件.remove( 指標 )
- 程式用法:
<select id='games' size=6
onchange='alert( this.options[ this.selectedIndex ].text )'>
<option>賽車遊戲
<option selected>射擊遊戲
<option>好玩遊戲
</select>
<script type='text/javascript'>
function addOption()
{
var os=document.getElementById('games');
var np = document.createElement("option");
os.options.add(np, 1);
np.innerHTML = "益智遊戲";
}
</script>
<p><a href='javascript:addOption()'>點此新增選項</a>
<p><a href='javascript:document.getElementById("games").remove(1)'>點此移除選項</a> - 執行結果:
產生新的 Option 物件。其語法是:
新物件= new Option([text], [value], [defaultSelected], [selected])
- text:是選項的字串。
- value:是選項的 value 屬性之字串。
- defaultSelected:設為 true 則為預設被選。內定為false。
- selected:設為 true 則被選擇。內定為false。
可以配合 add() 使用,增加新的選項。
- 程式用法:
<select id='game2' size=6
onchange='alert( this.options[ this.selectedIndex ].text )'>
<option>益智遊戲
<option selected>武打遊戲
<option>小遊戲
</select>
<script type='text/javascript'>
function addOption2()
{
var os=document.getElementById('game2');
var np = new Option("障礙遊戲", '', false, true);
os.options.add(np);
}
</script>
<p><a href='javascript:addOption2()'>點此新增選項</a>
<p><a href='javascript:document.getElementById("game2").remove(1)'>點此移除選項</a> - 執行結果:
可以直接用在 options 物件,用來取代舊的選項,或加在尾端。
- 程式用法:
<select id='body' size=6
onchange='alert( this.options[ this.selectedIndex ].text )'>
<option>頭
<option>手
<option selected>腳
</select>
<script type='text/javascript'>
function addOption3()
{
var os=document.getElementById('body');
var ol=os.length;
os.options[ os.length ]= new Option("心--新增");
alert( ol +' / '+ os.length );
}
function replaceOption3()
{
var os=document.getElementById('body');
os.options[ 1 ]= new Option("肺--取代");
}
</script>
<p><a href='javascript:addOption3()'>點此新增選項</a>
<p><a href='javascript:replaceOption3()'>點此替換選項</a> - 執行結果: