select optionで選択された時にページを遷移したい
selectタグのoptionで指定された値が選択された時にその値で画面を遷移させたい時があると思います。
今回はその方法をご紹介していきたいと思います。
HTMLとJSだけで実現できる機能なので、実際に動きがわかるようにサンプルのデモも用意したので実際の動きと合わせて参考にして下さい！
実際のサンプルデモ
こちらが今回実現したい機能になります。
この後、実際の実装方法について説明していますので是非参考にしてください。
HTMLでやってみる
まずは一番手軽なHTMLのみでの実装方法をご紹介します。
サンプルデモ
https://page-sample.awesome-linus.com/2019/05/11/select-option-href/html/
サンプルコード
onChangeを使用して、valueの値が変化した時にlocation.href=value;を実行します。
valueには、optionのvalueに指定したものが入ってきます。
<select onChange="location.href=value;">
<option value="">default</option>
<option value="./sample1.html">sample1</option>
<option value="./sample2.html">sample2</option>
<option value="./sample3.html">sample3</option>
<option value="https://awesome-linus.com/">Awesome Blog</option>
</select>JavaScriptでやってみる
今度はJavaScriptでやる方法です。
HTMLではなく、JavaScriptで実装する必要がある場合もあるかと思うので参考にしてください。
サンプルデモ
https://page-sample.awesome-linus.com/2019/05/11/select-option-href/javascript/
サンプルコード
document.getElementByIdでselectの要素を取得します。
onchangeでselectのvalueの値が変化した時にwindow.location.hrefで画面を遷移しています。
<select id="change_js">
<option value="">default</option>
<option value="./sample1.html">sample1</option>
<option value="./sample2.html">sample2</option>
<option value="./sample3.html">sample3</option>
<option value="https://awesome-linus.com/">Awesome Blog</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
const selected = document.getElementById("change_js");
selected.onchange = function() {
window.location.href = selected.value;
};
</script>jQueryでやってみる
今度はjQueryでの実装方法を見てみましょう。
サンプルデモ
https://page-sample.awesome-linus.com/2019/05/11/select-option-href/jquery/
サンプルコード
今回は$(“select[name=change_js]”)でselectの要素を取得してみました。
こちらもselectのvalueの値が変化した時にwindow.location.hrefで画面を遷移しています。
注意点は、selectで選択された値を取得する時は、valueではなく、val()で取得しないといけないので注意してください。
<select name="change_js">
<option value="">default</option>
<option value="./sample1.html">sample1</option>
<option value="./sample2.html">sample2</option>
<option value="./sample3.html">sample3</option>
<option value="https://awesome-linus.com/">Awesome Blog</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
const selected = $("select[name=change_js]");
selected.on('change', function(){
window.location.href = selected.val();
});
</script>
コメント