🐤
【JavaScript】selectタグで選択されたvalue値にリダイレクトさせる
selectタグで選択されたURL(value)に遷移されるバニラjsの処理を作ったのでメモ。
同じページに複数のセレクターがあっても対応できます。
redirect.js
const redirectToPage = () => {
const selectors = Array.from(document.getElementsByClassName('js-select-redirect'));
selectors.forEach(selector => {
selector.addEventListener('change', function() {
const value = selector.value;
value && (window.location.href = value);
});
});
}
redirectToPage();
<dl>
<dt>爬虫類から探す</dt>
<dd>
<select class="js-select-redirect">
<option value="" selected disabled>選択してください</option>
<option value="/pet?category=トカゲ">トカゲ</option>
<option value="/pet?category=ヘビ">ヘビ</option>
</select>
</dd>
</dl>
<dl>
<dt>両生類から探す</dt>
<dd>
<select class="js-select-redirect">
<option value="" selected disabled>選択してください</option>
<option value="/pet?category="カエル">カエル</option>
<option value="/pet?category="有尾類">有尾類</option>
</select>
</dd>
</dl>
Discussion