jQueryでセレクトボックス選択時にページ遷移する方法

149 回閲覧されました

公開日 : 2025年1月24日
最終更新日 : 2024年10月25日

みなさんこんにちは、jonioです。

今回はセレクトボックスをの選択時にページ遷移をする方法の解説になります。

1 HTML
2 jQuery

HTML

下記になります。

<select id="select-box">
  <option value="1">ページ1</option>
  <option value="2">ページ2</option>
  <option value="3">ページ3</option>
</select>

jQuery

下記になります。

$('#select-box').change(function() {
    let selectedValue = $(this).val();
    if (selectedValue == 1) {
        window.location.href = "遷移したいページのURL";
    } else if (selectedValue == 2) {
        window.location.href = "遷移したいページのURL";
    } else if (selectedValue == 3) {
        window.location.href = "遷移したいページのURL";
    }
});

ポイントは4行目・6行目・8行目の「window.location.href」です。

「遷移したいページのURL」の部分にURLを書くとセレクトボックス選択時にページ遷移ができます。