セレクトボックスの選択後にボタンクリックで選択したものに関連した任意のページへ遷移させたいです。

Question

下記のようにセレクタボックスのプルダウンで選択しvalueで指定しているページに飛ばす方法があると思います。
ただ、私が行いたいのはinputタグではなくaタグで行いたいのですが、それは可能でしょうか？

できればjQueryの場合とJavascriptの場合両方ご教示いただけると幸いです。
よろしくお願いします。

<!--ボタンを押下時-->
<select name="pulldown2">
<option value="">移動先を選択</option>
<option value="/category/php">PHP</option>
<option value="/category/jquery">jQuery</option>
</select>
<input type="button" id="location" value="移動">
<!--上記inputを使わずに下記aタグを使いたい-->
<a href="#" target="_blank" id="location">移動</a>

// ボタンを押下時に遷移
  $('#location').click(function() {
    if ($(this).val() != '') {
      window.location.href = $('select[name=pulldown2]').val();
    }
  });
});

// ボタンを押下時に遷移
  document.getElementById('location').addEventListener('click', function() {
    // <select id="pulldown2">
    var elem2 = document.getElementById('pulldown2');
    if (elem2.selectedIndex != 0) {
      top.location.href = elem2.options[elem2.selectedIndex].value;
    }
  });
});

Answer 1

id="location"が2つあるのはHTMLの文法上おかしいことなので、変えましょう。
（getElementByIdなどの取得に問題が起こる）

「セレクトを選ぶ⇒a要素をクリック」という動作を求めているのであれば、セレクトのchangeイベントを捕まえて、a要素のhref属性を書き換えましょう。

Comments

[gerick]

id="location"についてはinputをあえて入れているだけなので、実際はaタグだけです！
→「セレクトを選ぶ⇒a要素をクリック」という動作を求めているのであれば、セレクトのchangeイベントを捕まえて、a要素のhref属性を書き換えましょう。
なんとなくイメージはわくのですが、コードを書くとどのような感じになるのでしょうか？

[kei344]

「jQuery change」で検索すればたくさん出てくるので、試してみてください。

[gerick]

Javascriptもなのですが、そちらも同様の方法で検索すれば出るでしょうか？

[gerick]

チェンジイベントで探すと、結構行いたいことと違うものが多く出ていて、どれを使用すれば良いのが分からなくなってしまいました、、、。

[kei344]

特定のライブラリ内のコードでもない限り、自分自身の書いているコードと全く同じものが出てくる可能性はあまり有りません。提示したような検索語句でイベント処理をどう書くかが説明されているのでそれを参考にされればよいと思います。

また、「特定の要素でイベントが起こったときに、特定の要素の属性を書き換える」だけなので、どこに詰まっているかがわかりません（提示されたコードでもほぼ同じ事をしているので…）。ご自身で試したコードを質問文に「追記」してください。（決して元のコードを消さないでください）

[gerick]

すいません！大丈夫そうでした！！
環境の問題で上手くスクリプトが作動していなかっただけのようで、上手く出来ました、、、！
色々ありがとうございます！！