複数のセレクトタグの選択項目によってurlを切り替える【jQuery】

投稿日 2021年7月21日
著者のせっち
カテゴリープログラミング

こんにちは！のせっち@nosecchi01です。

「複数のセレクトタグの選択項目によってurlを切り替える方法」を解説します。

めちゃくちゃ丁寧に解説しますので初心者の方も安心です。

selectタグやラジオボタンの選択によって、何か操作をする記事はいくつかありますが、「複数の選択肢」に関する記事はあまりないので、是非参考にしてください。

それでは行ってみましょう！

codepenで確認

まずは動きを確認しましょう！

See the Pen 複数のセレクトタグの選択項目によってurlを切り替える(1) by Yuki Nose (@yukinouz1) on CodePen.

質問1、2を選択すると、urlが変わります。
選択肢を選び直すと、合わせてurlが切り替わります。

バリデーションも付けていますが、今回の主目的はurlの切り替えなので解説は省きます。
（選択肢を選び切らないとクリックできない、選択してくださいに戻すとエラー文字を出す）

解説

javascriptの全体像は下記です。

$(function() {
  const formSelect = $('.js-selectSample');
  const link = $('#link');
  formSelect.on('change', function() {
    // formSelectを配列で取得し、&で繋ぐ
    const valueArray = formSelect.map(function() {
      return `${$(this).val()}`;
    }).get().join('&');
    // 選択肢によって新しいurlを発行する
    const hrefTop = "https://example.com/";
    const lower01 = "lower-1";
    const lower02 = "lower-2";
    const lower03 = "lower-3";
    const lower04 = "lower-4";
    const lower05 = "lower-5";
    const lower06 = "lower-6";
    if(valueArray == "1-1&2-1") {
      link.attr({href: hrefTop + lower01});
    } else if (valueArray == "1-1&2-2"){
      link.attr({href: hrefTop + lower02});
    } else if (valueArray == "1-1&2-3") {
      link.attr({href: hrefTop + lower03});
    } else if (valueArray == "1-2&2-1") {
      link.attr({href: hrefTop + lower04});
    } else if (valueArray == "1-2&2-2") {
      link.attr({href: hrefTop + lower05});
    } else if (valueArray == "1-2&2-3") {
      link.attr({href: hrefTop + lower06});
    } else {
      link.attr({href: hrefTop});
    }
  });
});

codepen用のjsは省略しました。

分解して解説します。

const formSelect = $('.js-selectSample'); // selectタグ、ここの変更を監視する
const link = $('#link'); // aタグ、urlを切り替える

jsで操作するclassやidを定義しています。

formSelect.on('change', function() { // selectの選択項目に変更があったら、
  // formSelectを配列で取得し、&で繋ぐ
  const valueArray = formSelect.map(function() { // mapで配列を取得
    return `${$(this).val()}`; // selectのvalueを返す
  }).get().join('&'); // &で繋ぐ
});

コメントアウトで書いたような処理をやっています。

html要素を配列で取得して、join()を使って&で配列を繋ぎます。

const hrefTop = "https://example.com/"; // ドメイン
const lower01 = "lower-1"; // 飛ばしたい下層ページのurlを書いておく
// 省略
if(valueArray == "1-1&2-1") { // 文字列が一致した場合
  link.attr({href: hrefTop + lower01}); // id #linkのhrefを変更する
// 省略
} else {
  link.attr({href: hrefTop});
}

ほぼ同じ処理をしているので、適宜省略しています。

先ほど取得したarrayVallueで取得した文字列が合致する場合にurlを変更する処理を書いています。

attr(href: "変更したいurl")でurlを変更できます。