実現したいこと

複数のセレクトボックスから選択された組み合わせで出力する値を変えたい

発生している問題・分からないこと

2つのセレクトボックスではできたのですが3つのセレクトボックスの際にうまく実装できておりません

該当のソースコード

【2つのセレクトボックス】
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><script>
function check(f){
var arr={
"A":{"D":'<a href="https://test.html">950</a>'
,"E":1400,"F":1850,"G":2500}
,"B":{"D":1200,"E":1850,"F":2400,"G":2800}
,"C":{"D":2300,"E":2500,"F":2800,"G":3200}
};
var x=f.elements["x"].value;
var y=f.elements["y"].value;
f.elements["content"].value=(arr[x] && arr[x][y])?arr[x][y]:"";

}
</script>

<form action="#" id="form">
<select name="x" onchange="check(this.form);">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="y" onchange="check(this.form);">
<option value="">--</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select>
<textarea name="content" style="display:none;"></textarea>

<input type="submit" value="送信">

</form>


<script>
    // submit時にイベント実行をする関数
    document.getElementById('form').onsubmit = function (event) {
        // 再読み込み防止
        event.preventDefault();
        // 入力フォームの内容を取得
        let inputForm = document.getElementById('form').content.value;
		// 入力内容を画面に出力
        document.getElementById('output').innerHTML = `${inputForm}`;
    }
</script>


<p id="output"></p>

</body>
</html>

【3つのセレクトボックス】
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><script>
function check(f){
var arr={
"A":{"D":'<a href="https://test.html">950</a>'
,"E":1400,"F":1850,"G":2500}
,"B":{"D":1200,"E":1850,"F":2400,"G":2800}
,"C":{"D":2300,"E":2500,"F":2800,"G":3200}
};
var x=f.elements["x"].value;
var y=f.elements["y"].value;
var z=f.elements["z"].value;
f.elements["content"].value=(arr[x][y] && arr[x][y][z])?arr[x][y][z]:"";

}
</script>

<form action="#" id="form">
<select name="x" onchange="check(this.form);">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="y" onchange="check(this.form);">
<option value="">--</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select>
<select name="z" onchange="check(this.form);">
<option value="">--</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
</select>
<textarea name="content" style="display:none;"></textarea>

<input type="submit" value="送信">

</form>


<script>
    // submit時にイベント実行をする関数
    document.getElementById('form').onsubmit = function (event) {
        // 再読み込み防止
        event.preventDefault();
        // 入力フォームの内容を取得
        let inputForm = document.getElementById('form').content.value;
		// 入力内容を画面に出力
        document.getElementById('output').innerHTML = `${inputForm}`;
    }
</script>


<p id="output"></p>

</body>
</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

恐らくarrの選択時の組み合わせの部分かと思っておりますが値を出力はできておりません。
（arrの部分は2つのセレクトボックスの時に戻しております。）

補足

初歩的なことになるかと存じますが、ご教示いただけますと幸いです。

yambejp

2025/04/21 01:06

AのDにアンカーが設定されている意味がわからないのですが、単純にそういうデータを設定すればいいのですか？

TakaiY

2025/04/21 01:47

> 恐らくarrの選択時の組み合わせの部分かと思っております > arrの部分は2つのセレクトボックスの時に戻しております動かない原因だと思うのであれば、そのまま提示いただいたほうがよいアドバイスが得られると思います。また、 3×4×4 だと 48個もデータを作らなければらなないので、とりあえず、 2×2×2 で作ってみるのは

oo0220

2025/04/21 13:54

ご質問ありがとうございました。ご回答いただいたソースにて2 * 2 * 2で試させていただきました。まずは少数のデータにて検証をするように癖をつけます。

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

回答2件

ベストアンサー

変数 arr を3つのキーの組み合わせでも動くように変更する必要がありますね。

現状の2つのキーのようなツリー構造にすると管理が大変なので、フラットな表にすると楽かと思います。

js
1function check(f){
2  const arr = {
3    ADH: '<a href="https://test.html">950</a>',
4    ADI: ...,
5    ADJ: ...,
6    ADK: ...,
7    AEH: ...,
8    AEI: ...,
9    AEJ: ...,
10    AEK: ...,
11    AFH: ...,
12    ...
13  };
14
15  const x = f.elements['x'].value;
16  const y = f.elements['y'].value;
17  const z = f.elements['z'].value;
18  f.elements["content"].value = arr[x + y + z] ?? '';
19}

投稿2025/04/21 02:14

編集2025/04/21 02:22

int32_t

総合スコア21927

oo0220

2025/04/21 13:55

ご回答ありがとうございました。動作を確認できましたので、どこをどうするべきだったかを確認させていただきます。

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

【3つのセレクトボックス】の方は３つめのセレクトの値を参照していないように見えます。

参考

html
1<script>
2document.addEventListener('submit',e=>{
3  e.preventDefault();
4  const t=e.target;
5  const [x,y,z]=[t.elements['x'].value,t.elements['y'].value,t.elements['z'].value];
6  const obj={
7    "A":{"D":{"H":100,"I":200,"J":300},"E":1400,"F":1850,"G":2500},
8    "B":{"D":1200,"E":1850,"F":2400,"G":2800},
9    "C":{"D":2300,"E":2500,"F":2800,"G":3200},
10  };
11  const usp=new URLSearchParams();
12  usp.append('x',x);
13  usp.append('y',y);
14  if(x.value=='' ||
15     y.value=='' ||
16     (obj[x][y] instanceof Object && z=='')
17     ){
18    return false;
19  }
20  if(typeof obj[x][y]=="number"){
21    usp.append('content',obj[x][y]);
22  }else{
23    usp.append('z',z);
24    usp.append('content',obj[x][y][z]);
25  }
26  location.href='?'+usp.toString();
27});
28</script>
29<form id="form">
30<select name="x">
31<option value="">--</option>
32<option value="A">A</option>
33<option value="B">B</option>
34<option value="C">C</option>
35</select>
36<select name="y">
37<option value="">--</option>
38<option value="D">D</option>
39<option value="E">E</option>
40<option value="F">F</option>
41<option value="G">G</option>
42</select>
43<select name="z">
44<option value="">--</option>
45<option value="H">H</option>
46<option value="I">I</option>
47<option value="J">J</option>
48<option value="K">K</option>
49</select>
50<input type="submit" value="送信">
51</form>