看到知識家有這樣的一個問題,『如何使用下拉式選單,來改變文字方塊的值?』這種問題還真熟悉,這在幾年前的工作裡面幾乎常常碰到說。
這個問題是什麼意義呢?
ㄚ琪看到玥這樣解釋:
如:
選單一
文字方塊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可能可以更漂亮,不過上述的範例是最基本的使用。