WPのトップページ。複数のプルダウンからのリンクを作成するには？

###実現したいこと

WPのトップページを固定ページで作成しています。
そこにプルダウンを３つ設置して、選択肢によって対応するページに飛ぶようにしたいです。

具体的に言うと
『a,b,c』『1,2,3』『あ、い、う』のプルダウンの設置。
aと1とあを選びボタンを押すと『http（中略）a1あ』のページへ。
aと1といを選びボタンを押すと『http（中略）a1い』のページへ行くといった具合です。

似たような質問が他サイトにもあるのですが、
（http://oshiete.goo.ne.jp/qa/3512162.html）
これをwordpressに挿入するにはどうすればいいでしょうか。

初心者のため、幅の広い質問となって恐縮ですが、お助けいただけると幸いです。
よろしくお願いします。

kei344

2016/07/15 09:12 編集

URLにはリンクを張ることができますので、よろしくお願いします。またタグに指定されている「JAVA」は必要ですか？もしかして「JavaScript」ですか？

Ikuma

2016/07/15 09:28

ご指摘ありがとうございます。それぞれ修正いたしました。

kei344

2016/07/15 09:31

何度かリロードしてみたのですが、こちらの環境では編集されたことが確認できません。すみませんが、もういちど確認していただけませんか？

Ikuma

2016/07/15 09:32

更新完了しました。と表記されるのですが、見直すと更新されていないようです。なるべく早く訂正します。

Ikuma

2016/07/15 09:40

訂正ができないため、削除依頼を出しました。お騒がせしました。

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

回答1件

汚いコードですがこんな感じでしょうか?あとはBootstrapなどで整えてください｡

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1.0">
6  <title></title>
7</head>
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="送信" onClick="func()">
24</form>
25
26<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
27
28<script>
29
30function func() {
31  /*
32  今の設定では
33  aとdを選択するとyahoo
34  bとfを選択するとgoogleに飛ぶ
35  */
36  //各select要素を取得
37  var abc = $('#abc').val();
38  var dfg = $('#dfg').val();
39  //2つの値の条件ですが､論理演算子を使い細かく設定
40  if (abc == 'a' && dfg == 'd'){
41    window.location.href = 'http://www.yahoo.co.jp/';
42  //いくつも設定していく
43  }else if (abc == 'b' && dfg == 'f'){
44    window.location.href = 'https://www.google.co.jp/';
45  }else{
46    //それ以外の処理
47  }
48}
49</script>
50</body>
51</html>
52