「教えて!ピックアップ」リリース!

要するに、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>

A 回答 (2件)

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>
    • good
    • 0
この回答へのお礼

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

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

こんばんは



そもそも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>
    • good
    • 0
この回答へのお礼

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング