| ポイント |
<![CDATA[
n = 0;
fObj = document.myFORM;
n += eval(fObj.sel0.options[fObj.sel0.selectedIndex].value);
n += eval(fObj.sel1.options[fObj.sel1.selectedIndex].value);
fObj.result.value = n;
fObj.tax.value = Math.round(n * 0.05);
fObj.total.value = n + Math.round(n * 0.05);
]]>
|
| 説 明 |
セレクトメニューを利用して価格計算を行う場合、selectオブジェクトの選択番号をキーにして選択された項目を導き出します。項目はoptionオブジェクトで価格をvalueに指定しておくことで価格計算を簡単に行うことができます。また、即座に結果を反映させるためにselectタグ内にonChangeイベントで価格を計算する関数名を記述しておきます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>選択された部品に応じて即座に価格の計算をする（セレクトメニュー版）</title>
<script Language="JavaScript"><!--
function calc()
{
n = 0;
fObj = document.myFORM;
n += eval(fObj.sel0.options[fObj.sel0.selectedIndex].value);
n += eval(fObj.sel1.options[fObj.sel1.selectedIndex].value);
fObj.result.value = n;
fObj.tax.value = Math.round(n * 0.05);
fObj.total.value = n + Math.round(n * 0.05);
}
// --></script>
</head>
<body>
<form name="myFORM">
<select name="sel0" onChange="calc()">
<option value="200">部品１[200円]</option>
<option value="230">部品２[230円]</option>
<option value="310">部品３[310円]</option>
</select>
<select name="sel1" onChange="calc()">
<option value="2000">カバー１[2000円]</option>
<option value="2630">カバー２[2630円]</option>
<option value="3500">カバー３[3500円]</option>
<option value="8500">カバー４[8500円]</option>
</select>
<hr>
合計（税抜き）<input type="text" name="result"><br>
消費税<input type="text" name="tax"><br>
合計（税込み）<input type="text" name="total"><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
option項目が選択されているかどうかをselectedで判別して計算する事もできます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
選択された部品に応じて即座に価格の計算をする（セレクトメニュー版）