🐤

【JavaScript】selectタグで選択されたvalue値にリダイレクトさせる

2023/08/20に公開

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