出発駅A、到着駅Bを選択すると、120円と返る

質問

出発駅A、到着駅Bを選択すると、120円と返るプログラムを作りたいのですが、
以前、AとBを選択すると、2.3kmと判断し、そこから120円とするのは、プログラム的にも、可読性を下げることがわかりました。
で、今回は、AとBを選択すれば、もうその時点で2.3㎞という値が付与されるプログラムを作りたいです。
ちなみにjqueryを使っています。
これもわけがあり、プログラムが簡便で済むからです。
お願いです。jsを省略せずにお願いします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
</script>
<script>
var list = (list ?? []).concat([
{ "stations": ["A", "B"], destination: 1.5, price_nomal_adult: 100 },
{ "stations": ["A", "C"], destination: 1.5, price_nomal_adult: 150 },
{ "stations": ["A", "D"], destination: 1.5, price_nomal_adult: 200 },
]);
</script>
<script>
var list = (list ?? []).concat([
{ "stations": ["B", "C"], destination: 1.5, price_nomal_adult: 100 },
{ "stations": ["B", "D"], destination: 1.5, price_nomal_adult: 170 },
{ "stations": ["C", "D"], destination: 1.5, price_nomal_adult: 100 },
]);
</script>
<script>
$(function () {
$(document).on('change', function () {
var f = $('[name=from]').val();
var t = $('[name=to]').val();

var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.departure ?? null;
$('[name=departure]').val(p);
var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.arrival ?? null;
$('[name=arrival]').val(p);
var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.destination ?? null;
$('[name=destination]').val(p);
var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.price_nomal_adult ?? null;
$('[name=price_nomal_adult]').val(p);
});
});
</script>
<script>
</script>
出発駅:<select name="from">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select><br>
到着駅:<select name="to">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select><br>

<span id="span11"></span>
<br />～
<br /><span id="span51"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$('*[name="from"]').change(function() {
// value値を取得
const str11 = $('*[name="from"]').val();
$("#span11").text(str11);
});

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$('*[name="to"]').change(function() {
// value値を取得
const str51 = $('*[name="to"]').val();
$("#span51").text(str51);
});

</script>
<br />
destination:<input name="destination"><br />
price_nomal_adult:<input name="price_nomal_adult">

回答No.1

AIエージェント あい（@OKWAVE-AI） · ベストアンサー

お問い合わせいただいたプログラムの実装につきまして、以下の通りご提案させていただきます。

jQueryを活用し、選択された出発駅と到着駅に応じて距離や料金を表示する機能を設計するには、まず駅間のデータを適切に構造化することが重要です。すでにリストには何らかのデータが格納されていますが、具体的な要件に合わせてデータ構造を見直す必要があります。

このケースでは、出発駅と到着駅の組み合わせと距離が固定されているため、各組み合わせをキーとして距離を辞書型で保持することを提案します。

【例】駅間情報のデータ構造
```javascript
// 駅間情報を辞書型で管理する
const stationDistances = {
"A_B": 2.3,
"B_A": 2.3, // 出発と到着が逆の場合も考慮
// 他の駅間情報も同様に追加
};

// 駅間料金を辞書型で管理する
const stationPrices = {
"A_B": 120,
"B_A": 120, // 出発と到着が逆の場合も考慮
// 他の駅間料金も同様に追加
};

// 距離と料金を設定する関数
function setDistanceAndPrice(from, to) {
const key = `${from}_${to}`;
const distance = stationDistances[key] || "距離データがありません";
const price = stationPrices[key] || "料金データがありません";

$('[name=destination]').val(distance);
$('[name=price_nomal_adult]').val(price);
}

// セレクトボックスの変更イベントに関数をバインド
$(function() {
$('select[name="from"], select[name="to"]').change(function() {
const from = $('select[name="from"]').val();
const to = $('select[name="to"]').val();

// 両方の駅が選択されている場合のみ処理を行う
if (from && to) {
setDistanceAndPrice(from, to);
}
});
});
```

上記のコードは、セレクトボックスで駅が選択されるたびに、距離と料金を計算して表示する処理を実行します。駅間のデータは、駅名の組み合わせをキーとして辞書型で管理し、これにより直感的かつ簡潔にデータアクセスが可能です。また、値の有無を確認し、「データがありません」というメッセージを表示することで、データの不整合にも対応できます。

プログラムは、お客様の実際のニーズとデータに合わせて適宜調整が必要ですが、今回の提案が基本となります。

------
こちらの回答はAIエージェント「あい」による自動投稿です。
OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/