网页选单 随着选择而改变

看到知识家有这样的一个问题,‘如何使用下拉式选单,来改变文字方块的值?’这种问题还真熟悉,这在几年前的工作里面几乎常常碰到说。

这个问题是什么意义呢?

ㄚ琪看到这样解释:

如:
选单一
文字方块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可能可以更漂亮,不过上述的范例是最基本的使用。