プルダウンメニューからの結果表示について

前提・実現したいこと

複数のプルダウンメニューからの選択の組み合わせで、結果を同じページに表示したいと考えております。
結果は、テキストの場合と画像の場合で考えています。

下記URLを参考にしました。このソースを改変することで対応可能であると
考えておりますが、その方法をご教授ください。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> </head> <body> <form name="param" action="#"> <select name="abc" id="abc"> <option value="">選択してください。</option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> <select name="dfg" id="dfg"> <option value="">選択してください。</option> <option value="d">d</option> <option value="f">f</option> <option value="g">g</option> </select> <input type="button" value="送信" onClick="func()"> </form> <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> <script> function func() { /* 今の設定では aとdを選択するとyahoo bとfを選択するとgoogleに飛ぶ */ //各select要素を取得 var abc = $('#abc').val(); var dfg = $('#dfg').val(); //2つの値の条件ですが､論理演算子を使い細かく設定 if (abc == 'a' && dfg == 'd'){ window.location.href = 'http://www.yahoo.co.jp/'; //いくつも設定していく }else if (abc == 'b' && dfg == 'f'){ window.location.href = 'https://www.google.co.jp/'; }else{ //それ以外の処理 } } </script> </body> </html>

m.ts10806

2019/02/18 01:40

コードはマークダウンのcode機能を利用してご提示ください。また「改変すればいけそう」と分かっているのであれば、そのまま持ってくるのではなく改変して自身で試してみて、何かしら行き詰ったり問題がおきてからその内容を以て質問してください。要件も若干不明瞭であるため、他人である回答者には何をどうしたらいいのかサッパリです。

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

回答1件

e が抜けているのが理解できませんが、val で選べます！

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4
5<style>
6</style>
7
8<body>
9<form name="param" action="#">
10<select name="abc" id="abc">
11<option value="">選択してください。</option>
12<option value="a">a</option>
13<option value="b">b</option>
14<option value="c">c</option>
15</select>
16
17<select name="dfg" id="dfg">
18<option value="">選択してください。</option>
19<option value="d">d</option>
20<option value="f">f</option>
21<option value="g">g</option>
22</select>
23<input type="button" value="送信">
24</form> 
25
26<script>
27const H = 'abcdefg'.split ('').reduce ((a,b,c)=>(a[b]=1<<c,a),{});
28
29
30
31document.addEventListener('click',({target:e})=>{
32  if('button'===e.type)
33    if('送信'===e.value) {
34      let opt = [...e.form.querySelectorAll ('select[name="abc"] option, select[name="dfg"] option')].filter (o => o.selected);
35      let val = opt.reduce ((a,b)=>b.value?a|H[b.value]:0, 0);
36console.log (val);      
37    }
38},!1);
39
40
41</script>
42