jquery プルダウンで見積もり表

javascriptにて料金見積もり表を作成しています。
プルダウン1つ目、それを選択したら2つ目の内容が1つ目の内容に応じて内容が変わる。
それは下記のやり方でできたのですが、それにあと1つ項目を増やしたいのですがそれができません。

1つ目選択、それに応じた2つ目選択。今は１つ目＋２つ目の合計が出る。
新しく作った3つ目は独立してて、それは選択したら現在の１＋２に追加で＋３の合計にしたい。

追加したい３つ目というのは、
距離
２５キロ０
２６キロ３００円
２７キロ６００円
というようなものです。
どうしたら良いでしょうか？

javascript
1<script type="text/javascript"><!--
2msgtxt = new Array();
3for (i=0; i<9; i++){
4msgtxt[i] = new Array();
5}
6
7msgtxt[0][0]="選択してください";
8msgtxt[0][1]="選択してください";
9msgtxt[0][2]="選択してください";
10msgtxt[0][3]="選択してください";
11msgtxt[1][0]="選択してください";
12msgtxt[1][1]="平日3時間(12M) 14,900円";
13msgtxt[1][2]="平日3時間(19.5M) 19,900円";
14msgtxt[1][3]="選択できません";
15msgtxt[2][0]="選択してください";
16
17//[8][3]まで繰り返し。省略。
18
19
20
21function selchg(){
22sltd=document.f1.s1.selectedIndex;
23if (sltd=="0"){
24document.f1.s2.options[1].text="選択してください";
25document.f1.s2.options[2].text="選択してください";
26document.f1.s2.options[3].text="選択してください";
27 document.f1.s2.options[0].text="選択してください";
28}
29else if (sltd=="1"){
30document.f1.s2.options[0].text="選択してください";
31document.f1.s2.options[1].text="12Ｍ料金 (税別)";
32document.f1.s2.options[2].text="19.5Ｍ料金 (税別)";
33document.f1.s2.options[3].text="-";
34
35}
36else if (sltd=="2"){
37document.f1.s2.options[0].text="選択してください";
38document.f1.s2.options[1].text="12Ｍ料金 (税別)";
39document.f1.s2.options[2].text="19.5Ｍ料金 (税別)";
40document.f1.s2.options[3].text="-";
41}
42
43//else if (sltd=="8"){ まで繰り返し 省略。
44}
45
46function txtchg(){
47x=document.f1.s1.selectedIndex;
48y=document.f1.s2.selectedIndex;
49document.f1.t1.value=msgtxt[x][y];
50}
51//--></script>

html
1<form name="f2">
2<h2>レンタル表</h2>
3<select class="plicespan" name="s1" onchange="selchg2()">
4<option>選択してください</option>
5<option>平日料金3時間</option>
6<option>平日料金6時間</option>
7<option>平日料金8時間(9時～17時)</option>
8<option>延長料金(9時～18時内)</option>
9<option>早朝・夜間・日・祝日3時間</option>
10<option>早朝・夜間・日・祝日6時間</option>
11<option>早朝・夜間・日・祝日8時間</option>
12<option>延長料金(日・祝日・早朝・夜間)</option>
13<option>道路使用許可申請代行</option>
14</select>
15
16・長さ   <select class="plicespan" name="s2" onchange="txtchg2()">
17<option>選択してください</option>
18<option>-</option>
19<option>-</option>
20<option>-</option>
21</select>
22
23・<span style="color: #ff0000;">合計金額</span> <textarea class="area" name="t2"></textarea>
24
25</form>

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
6	<script>
7		$(function(){
8			selection2 = [
9				[
10					{ text: "-", value: 0 }
11				],[
12					{ text: "選択してください", value: 0 },
13					{ text: "平日3時間(12M) 14,900円", value: 14900 },
14					{ text: "平日3時間(19.5M) 19,900円", value: 19900 }
15				],[
16					{ text: "選択してください", value: 0 },
17					{ text: "12M 14,900円", value: 14900 },
18					{ text: "19.5M 19,900円", value: 19900 }
19				],[
20					{ text: "選択してください", value: 0 },
21					{ text: "12M 14,900円", value: 14900 },
22					{ text: "19.5M 19,900円", value: 19900 }
23				],[
24					{ text: "選択してください", value: 0 },
25					{ text: "12M 14,900円", value: 14900 },
26					{ text: "19.5M 19,900円", value: 19900 }
27				],[
28					{ text: "選択してください", value: 0 },
29					{ text: "12M 14,900円", value: 14900 },
30					{ text: "19.5M 19,900円", value: 19900 }
31				],[
32					{ text: "選択してください", value: 0 },
33					{ text: "12M 14,900円", value: 14900 },
34					{ text: "19.5M 19,900円", value: 19900 }
35				],[
36					{ text: "選択してください", value: 0 },
37					{ text: "12M 14,900円", value: 14900 },
38					{ text: "19.5M 19,900円", value: 19900 }
39				],[
40					{ text: "選択してください", value: 0 },
41					{ text: "12M 14,900円", value: 14900 },
42					{ text: "19.5M 19,900円", value: 19900 }
43				],[
44					{ text: "選択してください", value: 0 },
45					{ text: "12M 14,900円", value: 14900 },
46					{ text: "19.5M 19,900円", value: 19900 }
47				]
48			];
49			$("#s1").change(function() {
50				$("#s2 option").remove();
51				$("#t2").text("");
52				selection2[$("#s1 option:selected").val()].forEach(function(value) {
53					$option = $('<option>').val(value.value).text(value.text);
54					$("#s2").append($option);
55				});
56			});
57			$("#s2, #s3").change(function() {
58				if ($("#s2").children().length > 1) {
59					$("#t2").text(parseInt($("#s2 option:selected").val()) + parseInt($("#s3 option:selected").val()));
60				}
61			});
62		});
63	</script>
64</head>
65
66<body>
67	<form name="f2">
68		<h2>レンタル表</h2>
69		
70		<select class="plicespan" name="s1" id="s1">
71			<option value="0">選択してください</option>
72			<option value="1">平日料金3時間</option>
73			<option value="2">平日料金6時間</option>
74			<option value="3">平日料金8時間(9時～17時)</option>
75			<option value="4">延長料金(9時～18時内)</option>
76			<option value="5">早朝・夜間・日・祝日3時間</option>
77			<option value="6">早朝・夜間・日・祝日6時間</option>
78			<option value="7">早朝・夜間・日・祝日8時間</option>
79			<option value="8">延長料金(日・祝日・早朝・夜間)</option>
80			<option value="9">道路使用許可申請代行</option>
81		</select>
82
83		・長さ
84		<select class="plicespan" name="s2" id="s2">
85			<option>-</option>
86		</select>
87		
88		・距離
89		<select class="plicespan" name="s3" id="s3">
90			<option value="0">25キロ0円</option>
91			<option value="300">26キロ300円</option>
92			<option value="600">27キロ600円</option>
93		</select>
94
95		・<span style="color: #ff0000;">合計金額</span> <textarea class="area" name="t2" id="t2"></textarea>
96
97	</form>
98</body>
99
100</html>