2009年2月2日

SELECT 元素:方法

特徵 | 方法
SELECT 元素物件的方法

此處只講 SELECT 元素物件特有的方法,其它方法請參考 element 物件。

add()

增加選項。其語法是:

SELECT元素物件.add( 新元素物件 [, 指標])

新元素要用 createElement() 產生。未設指標時,新元素會被加在尾端。

remove()

移除指標所在的選項。其語法是:

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>

  • 執行結果:

    點此新增選項

    點此移除選項

new Option()

產生新的 Option 物件。其語法是:

新物件= new Option([text], [value], [defaultSelected], [selected])

  1. text:是選項的字串。
  2. value:是選項的 value 屬性之字串。
  3. defaultSelected:設為 true 則為預設被選。內定為false。
  4. 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>

  • 執行結果:

    點此新增選項

    點此替換選項


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。