網頁選單 隨著選擇而改變



看到知識家有這樣的一個問題,『如何使用下拉式選單,來改變文字方塊的值?』這種問題還真熟悉,這在幾年前的工作裡面幾乎常常碰到說。

這個問題是什麼意義呢?

ㄚ琪看到這樣解釋:

如:
選單一
文字方塊1則顯示15文字方塊2則顯示65
選單二
文字方塊1則顯示20文字方塊2則顯示70
依此類推

他不知道是否能用Java的語法寫出來,或者一般的語法也可以。

想法框架:
想改變等級時,後面的會更著變動攻擊    防禦    傷害    魔防
等級 攻擊 防禦 傷害 魔防

看起來好像是要寫遊戲攻略的網頁說。

測試網頁
http://zxc250412.sg1013.myweb.hinet.net/-test

好了,看到這裡,ㄚ琪要分享工作的經驗了,首先針對原測試頁的Select標籤做修改

<select name="D1A" id="D1A" >
        <option selected="selected" value="1">LV.1</option>
        <option value="2">LV.2</option>

        <option value="3">LV.3</option>
        <option value="4">LV.4</option>
        <option value="5">LV.5</option>
        <option value="6">LV.6</option>
        <option value="7">LV.7</option>
        <option value="8">LV.8</option>

        <option value="9">LV.9</option>
        <option value="10">LV.10</option>
      </select>

這樣的目的可以讓我直接取用選項值,用數字字串總比用文字字串來得方便吧。 接著為了文字方塊可以隨著選單的改變而改變,我們要再select標籤加入onChange事件,當選單改變時我們就可以觸發此事件,觸發的函式我們設定為changeT1,並且有一個參數this.value,表示選單選Lv.1時傳1的值,我們撰寫下JavaScript的changeT1的函式如下:

<script>
function changeT1(value)
{
var arrT1=new Array(15,65,3,4,5,6,7,8,9,10);
var arrT2=new Array(20,70,3,4,5,6,7,8,9,10);
document.form1.T1.value = arrT1[value-1];
document.form1.T2.value = arrT2[value-1];
}
</script>

注意這是Javascript的函式,跟Java是不同,請注意其中的差別。

因為當選單選不同的等級,不同的方塊會有不同的值,所以我們給每個方塊不同的值,設成陣列。

範例程式可以參考範例更改。

當然如果用jQuery可能可以更漂亮,不過上述的範例是最基本的使用。

Print Friendly, PDF & Email

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料