javascriptでの完全一致による表記

質問

ホームページに以下のようなフォームを付けたいのですが、色々なサイトを拝見しましたが、見つかりませんでした。
できればjavascriptにて作成をしたいのですが・・・
コードをお教えいただけますと幸いです。
複雑でjavascriptで実現できるか分かりませんが、どうぞ、よろしくお願いいたします。

●東京 → 名古屋 - 自由席＝100円
●東京 → 名古屋 - 指定席＝200円
●東京 → 京都 - 自由席＝300円
●東京 → 京都 - 指定席＝400円

上記のような内容をスクリプト側に設定しておきまして、
例えば

【東京】 → 【名古屋】 - 【自由席】
※【　】は、プルダウンを示しております。
※各プルダウン枠は、全て独立です。
（【東京 - 名古屋 - 自由席】といった形にくっついてはいません。）

と選択された場合、スクリプトに設定を行った区間と一致しますので、テキストフォームに【100】円といった形に表示する事は可能でしょうか。
※スクリプト側で設定を行っていない【名古屋】 → 【京都】 - 【自由席】のように一致しない選択をされた場合は、価格表示のフォームに【この区間は、販売しておりません】と表示できますでしょうか。

また、別に枚数の入力フォームを作成し、「3」枚と入力された場合、
自動的に掛け算を行い、別のテキストフォームに区間代金×枚数の合計として表示する事は可能でしょうか。

どうぞ、よろしくお願いいたします。

回答No.3

yambejp · ベストアンサー

＞<input type="text" name="goukei" id="goukei" />

＞に変更をしてみたのですが、

失礼しました。inputで処理したかったんですよね、であれば
<div>単価：<span id="tanka">0</span> - 合計：<span id="goukei"></span></div>
の箇所を、
<div>単価：<input type="text" name="tanka" value="0" /> - 合計：<input type="text" name="goukei" /></div>
として、javascriptのcheck()を以下に書き換えてください。

function check(f){
var shuppatu=f.shuppatu.value;
var touchaku=f.touchaku.value;
var shubetu =f.shubetu.value;
var maisu =parseInt(f.maisu.value);
var tanka =f.tanka;
var goukei =f.goukei;
if(!shuppatu || !touchaku || !shubetu || !maisu) return false;
var p=(!ryoukinhyo[shuppatu] || !ryoukinhyo[shuppatu][touchaku] || !ryoukinhyo[shuppatu][touchaku][shubetu])?false:ryoukinhyo[shuppatu][touchaku][shubetu]["価格"];
if(p) {
tanka.value=p.toString();
goukei.value=(p*maisu).toString();
}else{
tanka.value="0";
goukei.value="【この区間は、販売しておりません】";
}
}

お礼

yambejp 様

早々にご回答いただきまして、本当に有難うございます。
試してみましたところ、正常に行う事ができました。

また、javascriptは奥深く、できないと思った事でもできるので、大変素晴らしいコードです。
自分でもコードを打てるように勉強していきたいと思います。

本当に有難うございました！

回答No.2

yambejp

たとえばこんな感じでどうでしょ？
<script>
var ryoukinhyo={
"東京":{
"名古屋":{
"自由席":{"価格":100},
"指定席":{"価格":200}
},
"京都":{
"自由席":{"価格":300},
"指定席":{"価格":400}
}
},
"名古屋":{
"東京":{
"自由席":{"価格":110},
"指定席":{"価格":220}
},
"京都":{
"自由席":{"価格":330}
}
}
}
function check(f){
var shuppatu=f.shuppatu.value;
var touchaku=f.touchaku.value;
var shubetu =f.shubetu.value;
var maisu =parseInt(f.maisu.value);
var tanka =document.getElementById("tanka");
var goukei =document.getElementById("goukei");
if(!shuppatu || !touchaku || !shubetu || !maisu) return false;
var p=(!ryoukinhyo[shuppatu] || !ryoukinhyo[shuppatu][touchaku] || !ryoukinhyo[shuppatu][touchaku][shubetu])?false:ryoukinhyo[shuppatu][touchaku][shubetu]["価格"];
if(p) {
tanka.innerHTML=p.toString();
goukei.innerHTML=(p*maisu).toString();
}else{
tanka.innerHTML="0";
goukei.innerHTML="【この区間は、販売しておりません】";
}
}
</script>
<form>
<select name="shuppatu" onchange="check(this.form)">
<option value="">出発選択</option>
<option value="東京">東京</option>
<option value="名古屋">名古屋</option>
<option value="京都">京都</option>
</select>
<select name="touchaku" onchange="check(this.form)">
<option value="">到着選択</option>
<option value="東京">東京</option>
<option value="名古屋">名古屋</option>
<option value="京都">京都</option>
</select>
<select name="shubetu" onchange="check(this.form)">
<option value="">種別選択</option>
<option value="自由席">自由席</option>
<option value="指定席">指定席</option>
</select>
<select name="maisu" onchange="check(this.form)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div>単価：<span id="tanka">0</span> - 合計：<span id="goukei"></span></div>
</form>

補足

yambejp　様

素晴らしいコード、有難うございます！
まさか、javascriptでこのような複雑な事ができると正直思っておりませんでした。

追記でご質問なのですが、このコードをフォームメールに利用したいと思っております。
プルダウン部分は、データとして送信が可能なのですが、合計価格を表示した箇所

<div>単価：<span id="tanka">0</span> - 合計：<span id="goukei"></span></div>

この部分がどうしても送信ができませんでした。
この部分を

<input type="text" name="goukei" id="goukei" />

に変更をしてみたのですが、合計価格がここに表示されず・・・
悩んでいる次第です。

この部分をテキストフォームとして表示する事は、難しいのでしょうか。
お手数をお掛けいたしますが、どうぞ、よろしくお願いいたします。

回答No.1

yambejp

重要な条件がぬけています

「東京 → 名古屋」 の条件を設定した場合「名古屋 → 東京」は
自動で決定するのでしょうか？
その場合「東京 → 名古屋」と「名古屋 → 東京」は同じ価格なのでしょうか？

補足

yambejp様

ご回答有難うございます。

「東京 → 名古屋」と「名古屋 → 東京」の料金は、異なります。

その為、「東京 → 名古屋」と選択した場合、「東京 → 名古屋」の料金が表示され、「名古屋 → 東京」は別物としてお考えいただければと思います。

どうぞ、よろしくお願いいたします。