selectで選択した値へOKボタンでページを遷移したい
selectボックスを使用して、OKボタンを押下したときに選択しているページへ遷移したいってありますよね！
今回は、そんな時に簡単に実装できる方法を紹介しました。
サンプルのデモも用意したので実際の動きと合わせて参考にして下さい！
もし、値を選択した瞬間にページを遷移したい場合は別記事にまとめてありますのでこちらを参照してください。
select optionで選択された時にページを遷移したい場合
実際のサンプルデモ
HTMLだけだと見た目が寂しかったので、Bootstrapで装飾してみました！
コピペでガンガン活用しちゃってください！
https://page-sample.awesome-linus.com/2019/05/12/select-option-ok-href/index.html
実際のコードを見ていこう！
こちらが実際のコードになります！
やっていることはとてもシンプルで、まず$(‘#btn-click’)でOKボタンの要素を取得します。
on(‘click’,function(){});でOKボタンがクリックされた時に、コールバック関数の処理を実行します。
コールバック関数内では、現在selectで選択されているoptionのvalueを取り出して、URLを遷移しています。
<div>
<div>
データ選択:
</div>
<div style="float:left; display: flex;">
<select class="browser-default custom-select" name="select-sample">
<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>
<div>
<div>
<button type="button" id="btn-click" class="btn btn-primary">
OK
</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$('#btn-click').on('click',function(){
window.location.href = $('select[name=select-sample]').val();
});
</script>select optionで選択された時にページを遷移したい場合
OKボタン押下時ではなく、select optionで値を選択した時にページを遷移したい場合はこちらをご参照ください。
コメント