操控 SELECT 元素

特徵 | 方法

disabled	length	options	selectedIndex
size	tabIndex	type	value

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>

• 程式用法：

  <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>
  

• 執行結果：
  蕭敬騰 吳宗憲 蔡依林 曾沛慈
  false

length

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

• 程式用法：

  <script type='text/javascript'>
  document.write( document.sel.stars.length );
  </script>
  

• 執行結果：

  4

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>

• 程式用法：

  <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>
  

• 執行結果：

  OPTION : false : 蕭敬騰 : 蕭敬騰
  OPTION : false : 吳宗憲 : 吳宗憲
  OPTION : true : 蔡依林 : Jolin
  OPTION : false : 曾沛慈 : 曾沛慈
  

• 在 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>

• 程式用法：

  <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>

• 程式用法：

  <script type='text/javascript'>
  document.write( document.sel.stars.size );
  </script>
  

• 執行結果：

  8

tabIndex

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

• 程式用法：

  <script type='text/javascript'>
  document.write( document.sel.stars.tabIndex );
  </script>
  

• 執行結果：

  0

type

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

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('stars');
  document.write( o.type);
  </script>
  

• 執行結果：

  select-multiple

value

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

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('stars');
  document.write( o.value );
  </script>
  

• 執行結果：

  Jolin

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