操控 SELECT 元素

特徵 | 方法

SELECT 元素物件的特徵

要請注意，javascrip 中並無 SELECT 物件，此處講的是 SELECT 元素的物件。此處只列出其特有的成員，其它成員請參考 element 物件。

disabled

存放 true，則取消元素的功能：不能聚焦，不能用 TAB 選取，不能上傳；預設為 false，元素可使用。 <form name='sel'> <select name='stars' id='stars' size=8 multiple style='width:180px' onchange='alert( this.selectedIndex )'> <optgroup label='男歌手'> <option>蕭敬騰 <option>吳宗憲 </optgroup> <optgroup label='女歌手'> <option selected value='Jolin'>蔡依林 <option disabled>曾沛慈 </optgroup> </select> </form> <script type='text/javascript'> document.write( document.sel.stars.disabled ); </script>

length

存放有幾個 OPTION 元素。 <script type='text/javascript'> document.write( document.sel.stars.length ); </script>

options

存放 OPTION 元素物件之清單。 <script type='text/javascript'> //var o=document.forms[0].elements[0].options; var o=document.getElementById('stars'); for( var i=0; i < o.length; i++) document.write( o[i].tagName +' : '+ o[i].selected +' : '+ o[i].text +' : '+ o[i].value +'<br />'); </script>

• 在 Firefox, Safari, Chrome，如果 OPTION 沒設 VALUE 時，o[i].value 會存放 OPTION 的內容；但在 IE6 則放空字串。
• 上例原使用 forms[0].elements[0]，在個人電腦測試成功，但是移到部落格無法用。

selectedIndex

存放被選擇的項目之指標。 <script type='text/javascript'> var o=document.getElementById('stars'); document.write( o.options[ o.selectedIndex ].innerHTML ); </script>

size

可見的橫欄數，參見 SIZE 元素。 <script type='text/javascript'> document.write( document.sel.stars.size ); </script>

tabIndex

存放 TAB 順序 TABINDEX 元素。 <script type='text/javascript'> document.write( document.sel.stars.tabIndex ); </script>

type

SELECT 元素是單選式（select-one）還是多選式（select-multiple）。 參見 MULTIPLE。 <script type='text/javascript'> var o=document.getElementById('stars'); document.write( o.type); </script>

value

存放被選擇的項目。 <script type='text/javascript'> var o=document.getElementById('stars'); document.write( o.value ); </script>

• 在 Firefox, Safari, Chrome，如果被選擇的 OPTION 沒設 VALUE 時，value 會存放 OPTION 的內容；但在 IE6 則放空字串。