リンク先によってselectがあらかじめ選択された状態にしたい

企業の採用情報サイトを作成しておりまして質問したいことがございます。

職種、店舗ごとに用意しておいた各ページからエントリーページに飛ぶ際に、
エントリーページの職種、店舗のselectがそれぞれ、あらかじめ選択された状態にしたいのですが、こういうのはどうやっているのでしょうか？

具体的には、下記のサイトと全く同じことをしたいと考えています。飛ぶページごとにリンク先のURLが違っているのはわかるのですが。。

職種ごとのページ↓
https://www.oreno.co.jp/recruit/job-details/bistro-bakery

そこから飛ぶエントリーページ↓
https://www.oreno.co.jp/recruit/entry

お教えいただければ助かります。よろしくお願いいたします。

m.ts10806

2019/06/07 09:32

Webサイトは何で作られているのでしょうか。

m-iwai

2019/06/07 09:35

紹介したサイトはおそらくwordpressでしょうか。私が作っているサイトはHTML5,CSS3,JSのみの静的サイトです。

行動規範の内容に同意します

回答3件

質問に記載されているサイトでは JavaScript で実現しています。
「職種ごとのページ」のリンク先のソースコードの 795-861 行がそれにあたります。
URL から2つの GET パラメータ jobcat, branch_name を取得して、select の値にセットすることで「あらかじめ選択された状態に」することを実現しています。

投稿2019/06/07 09:41

YukiYamashina

総合スコア1011

m-iwai

2019/06/07 09:48

ありがとうございます！jobcatとbranch_nameですね。リンク先のURLからbranch_nameというのはわかったのですが、それだけ検索してもなんのことかさっぱりで。。なんと検索したら良いのかわからず困っておりました。自分で調べてみようと思います！

mepon

2019/06/07 09:56

jobcatとbranch_nameは任意のパラメーター名なのであまり深く考えないほういいです。実現するためには ①遷移元からパラメーターをつけて飛ばす ②遷移先でパラメーターを取得して値をセットこの2つだと思います。もしjavascriptで実装するのであれば、javascript　パラメータ追加or取得などで調べるとよいと思います。

m-iwai

2019/06/07 10:04

ありがとうございます！だからbranch_nameで検索してもそれっぽい情報が全然出てこなかったんですね。。非常に具体的にお教えいただいて助かります！調べてトライしてみます。ご丁寧にありがとうございました。

行動規範の内容に同意します

何かしらパラメータを渡すと良いです。
提示先のサイトはURLパラメータによって動的に切り替えているようですね。
PHP（というよりWordPress）でURLを解析しているように思います。

JavaScriptのみでも実装は可能です。
リンク元からクエリストリングを渡してJavaScriptで解析し、その内容によって初期値を決定する方法です。

クエリストリングの解析方法やセレクトボックスの初期値設定方法はそれぞれ調べてください。

投稿2019/06/07 09:40

m.ts10806

総合スコア80850

m-iwai

2019/06/07 09:51

ありがとうございます！やはりphpで何かしらしているのですね。静的サイトでは難しいのかと思いましたが、JavaScriptでもなんとかなるのであればトライしてみようと思います。クエリストリング...初めて聞く用語です。なんと検索したら良いかわからず困っていたので非常に助かりました。自分で調べてみます！ありがとうございました！

行動規範の内容に同意します

ベストアンサー

クローズされちゃってますが、せっかくなので雰囲気だけの一例。
正解ではありません。簡単に書いただけなので参考程度にしてください。

ex.)
https://hoge.comというサイトからエントリーページで職種→飲食　店舗→関東を初期値にしたい。
https://hoge.com/entry?syokusyu=insyoku&tenpo=kantou
みたいなリンクURLにします（なんでもいいけどURLエンコードは考えずとりあえずローマ字にした）
リンク先ページのJavascriptでこんな感じに
※セレクトボックスのvalueとtextは同じ文字列であるものとする

Javascript
1$(function() {
2    //URLのパラメータ取得（?以降のsyokusyu=insyoku&tenpo=kantouの部分）
3    var urlParam = location.search.substring(1);
4    if(urlParam) {
5　　　　 //パラメータ文字列の分割（&で区切るのでsyokusyu=insyokuとtenpo=kantouになる）
6        var param = urlParam.split('&');
7        //配列の初期化
8        var setParam = [];
9            //パラメータの数分繰り返し
10            for($i=0; $i < param.length; $i++) {
11                //文字列から連想配列にする
12                var paramItem = param[$i].split('=');
13	            setParam[paramItem[0]] = paramItem[1];
14	        }
15            $(職種セレクタ).val(setParam.syokusyu);
16            $(店舗セレクタ).val(setParam.tenpo);
17    }
18
19});