Onchange的小筆記
以下這是最簡單的Onchange說明:

<select name=select onchange="functionname(this.options[this.options.selectedIndex].value)">

<? // 意思就是,這個下拉式選單名字是select , 只要你改變了他(也就是下拉之後),會執行一個副程式,副程式名字是functionname, 至於會做哪些事情,functionname
後面的()中的內容了
?>
<option value="">請選擇
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
</select>

<script>
function functionname(s)
{
    txt.value+=s;
    //選擇後,讓第一項被選中,這樣,就Change啦.
    document.all.sel.options[0].selected=true;
}
</script>
<textarea id=txt></textarea>

 
這裡提供一個事件給大家玩一下,是個很簡單的事件:你選了某一個選項之後,會跳出另一個可以選的選單。
 
<script language="JavaScript">

</script>
<label>
        <select name="type" onchange="show()">
          <option>請選擇類型</option>
          <option value="0">A</option>
          <option value="1">B</option>
        </select>
        <div id="type_A" style="position:absolute; z-index:1; visibility: hidden; ">
        <select name="type_value">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>       
        </select></div>
        <div id="type_B" style="position:absolute; z-index:1; visibility: hidden; ">
        <select name="type_value">
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>          
        </select></div>
        
        </label>
這裡的重點呢,是要將你要隱藏 / 顯示 的部份,用div包起來,讓它變成一個物件,這樣就會有效果了。
 
延伸閱讀:兩層式選單
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Joy 的頭像
    Joy

    正Man's World

    Joy 發表在 痞客邦 留言(2) 人氣()