2019年11月23日

selectboxを選択した際に遷移する簡単な方法2選(コピペOK)

selectboxを選択した際に遷移する方法

お世話になっております。今回はselectboxを選択した際に遷移したい場合がある際の対処法について解説していこうと思います。

selectboxを選択した際に遷移する方法2選

HTMLタグに直接onChageを付与する方法

HTML

<!-- value部分に遷移したいリンクをセットして下さい。 -->
<select onChange="location.href=value;">
  <option value="">選択して下さい</option>
  <option value="/date/201911">2019年11月</option>
  <option value="/date/201910">2019年10月</option>
  <option value="/date/201909">2019年9月</option>
  <option value="/date/201908/">2019年8月</option>
</select>

私がこの方法を使うのはWordPressなどのCMSで月別アーカイブを実装する際によく使用します。例は静的コードですがoptionのvalue部分に動的な値をセットするだけで実装できるのでおすすめです!

Javacsriptのファイルに分ける方法

上記は簡単な方法ではありますが、案件によってはHTMLに直接スタイルタグやスクリプトタグを記載することはNGということは少なくないです。そんな時はファイルを分けることで実装します。

HTML

<!-- value部分に遷移したいリンクをセットして下さい。 -->
<select id="select">
  <option value="">選択して下さい</option>
  <option value="/date/201911">2019年11月</option>
  <option value="/date/201910">2019年10月</option>
  <option value="/date/201909">2019年9月</option>
  <option value="/date/201908/">2019年8月</option>
</select>

JavaScript

const select = document.getElementById('select');
select.addEventListener('change', function () {
  window.location = select.value;
});

jQuery

const select = $("#select");
select.on('change', function () {
  window.location.href = select.val();
});

場合によってはjQueryが使えないこともあることもあると思いますので、生のコードも記載してありますので活用して下さい。