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

こんにちは!のせっち@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を変更できます。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。