詳しい人求む！

中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。

締切済

質問者：福本英一
質問日時：2022/06/24 18:45
回答数：2件

要するに、1回目の選択で中百舌鳥、2回目で深井を選択するのと、逆に1回目で深井、2回目で中百舌鳥と選択した場合とで同じ挙動するプログラムを作りたいです。
セレクトボックス内は数字に直しました。
以下はそのhtml文です。jsの部分はすべてお書きください。
もしこれに誰も答えられなかったら技術者は罵詈雑言を吐かれてもしょうがないものとみなします。
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
</style>

<body>
<p id=A>
<select id=B>
<option value="">--
<option value="sb01">中百舌鳥
<option value="sb02">深井
<option value="sb03">泉ケ丘
<option value="sb04">栂・美木多
<option value="sb05">光明池
<option value="a0">a0
<option value="a1">a1
<option value="a2">a2
</select>

<select id=C>
<option value="">--
<option value="sb01">中百舌鳥
<option value="sb02">深井
<option value="sb03">泉ケ丘
<option value="sb04">栂・美木多
<option value="sb05">光明池
<option value="b0">b0
<option value="b1">b1
<option value="b2">b2
</select>
</p>
<p id=D></p>

<script>
const vals = {
'sb01sb02':3.7,
'nakamozuizumigaoka':7.8,
'a0b0': 1.2,
'a0b1': 12,
'a0b2': 28.8,
},

len = [ 3, 6, 15, 30, 50],
prc = [140,160, 200, 250, 500],
f=(_,l=Math.round(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':'';

A.addEventListener('change',_=>f(vals[B.value+C.value]));
</script>

通報する

この質問は特に男性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2022/06/24 21:51

No1です。

気が付かなかったけれど、距離を算出しているのでしょうか？
であるなら、マトリックスのテーブルなんて持つ必要もないですね。

単独路線で考えれば、路線距離を持っていれば計算可能です。
後は、距離を運賃に換算するだけ。
複数路線の場合でも、路線ごとに同様の計算を行えば済みますね。

<p id=A>
<select>
<option value="">--
<option value="nakamozu">中百舌鳥
<option value="fukai">深井
<option value="izumigaoka">泉ケ丘
<option value="togamikita">栂・美木多
<option value="komyoike">光明池
<option value="izumithuou">和泉中央
</select>

<select>
<option value="">--
<option value="nakamozu">中百舌鳥
<option value="fukai">深井
<option value="izumigaoka">泉ケ丘
<option value="togamikita">栂・美木多
<option value="komyoike">光明池
<option value="izumithuou">和泉中央
</select>
</p>
<p id=D></p>

<script>
const
dist = [0, 3.7, 7.8, 10.2, 12.1, 14.3],
A = document.getElementById('A'),
S = A.querySelectorAll('select'),
D = document.getElementById('D');

A.addEventListener('click', e=>{
const b = S[0].selectedIndex, c = S[1].selectedIndex;
const d = (b && c)?`乗車距離は${Math.abs(dist[b-1] - dist[c-1]).toFixed(1)}km`:'';
D.textContent = d;
});
</script>

- 0
- 件

通報する

この回答へのお礼

あなたは、動物ですか。動物ならこんな回答しません。

通報する

お礼日時：2022/06/25 07:56

No.1

回答者： fujillin
回答日時：2022/06/24 19:32

こんばんは

そもそもChromeでは動作しないし、不思議なロジックになっているようですけれど・・

＞誰も答えられなかったら技術者は罵詈雑言を吐かれてもしょうがないものとみなします。
技術者ではありませんけれど、答えが付かないとすれば『誰も興味を持たなかった』ってことでしょう。
まぁ、勝手にみなすのはご自由ですけれど・・

方法や考え方はいろいろあると思いますが、重複があっても無くても単純に対応できる方法なら、全組み合わせのテーブルを作っておくのが簡単でしょう。
（ご提示のものが、サンプルなのか何なのかも不明なので・・）
選択肢に規則性があったり、何かのロジックがあるなら、もっと省略することも可能でしょうけれど。
例えば、二つの選択肢がまったく同じなら、テーブルは半分ですみますが、ご提示の例の場合は後半の内容が異なるようなので、そこは入れ替わることが無いものと考えれば、全部のテーブルを作成してまった方が簡単でしょう。
重複が多いようなら、ご提示のようにオブジェクトにしておいて、入れ替えたものと両方で検索して、ヒットしたほうを表示するという方法も考えられますね。

以下のサンプルでは、結果がわかりやすいように選択肢番号（1～8）を組み合わせた数字にしてあります。
例えば「12」は、「中百舌鳥」と「深井」の組み合わせといった具合。
入換えても同じ値になるようにテーブルを作成しておけばよいというだけのことです。
（6番目以降は入れ替わりがないので、それぞれ別の値になるようにしてあります）

<script>
const
d = [
[11, 12, 13, 14, 15, 16, 17, 18],
[12, 22, 23, 24, 25, 26, 27, 28],
[13, 23, 33, 34, 35, 36, 37, 38],
[14, 24, 34, 44, 45, 46, 47, 48],
[15, 25, 35, 45, 55, 56, 57, 58],
[61, 62, 63, 64, 65, 66, 67, 68],
[71, 72, 73, 74, 75, 76, 77, 78],
[81, 82, 83, 84, 85, 86, 87, 88]
],
B = document.getElementById('B'),
C = document.getElementById('C'),
D = document.getElementById('D');

document.getElementById('A').addEventListener('change', e=>{
const b = B.selectedIndex, c = C.selectedIndex;
const v = (b && c)?`${d[b-1][c-1]}円`:'';
D.textContent = v;
});
</script>