Javascriptで引数からセレクトメニュー（プルダウンメニュー）を選択状態にしたい時

前回、Javascriptでセレクトメニュー（プルダウンメニュー）が変更されたらGETで送信する方法を書いたが、引数付きでジャンプした際、セレクトメニューはデフォルトの一番上が選択された状態に戻ってしまう。

PHP等の場合は、セレクトメニューを書き出す際にselectedを付加して書き出せば良いが、.htmlの場合はJavascriptで処理する。
例えば以下URLの場合

https://www.digital-gate.com/?c=2&g=1

下のHTMLを見れば分かるが、通常何もしない状態ではそれぞれのプルダウンは「全クラス表示」「全グループ表示」となるが、それでは表示されているであろう内容と合わないから「c」のプルダウンが「2組」、「g」のプルダウンが「グループ1」が選択された状態にしたい。

URLの引数を取得して、プルダウンメニューが選択された状態になるようにする方法は以下のサンプル

Javascript

function getVars(){
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i <hashes.length; i++){
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

上記Javascriptを使うと引数から設定値を簡単に取得出来る。

class = getVars()["c"];
group = getVars()["g"];

使い方はこんな感じ。

あとはjqueryを使ってプルダウンの選択を変更するだけ。
※別途jqueryを読み込んでおくこと。

$('#class-items').val(class);
$('#group-items').val(group);

具体的にはこんな感じ。

HMTL

<form method="get" action="" name="form">
	<select name="class" onChange="multipleNavi()" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">１組</option>
		<option value="2">２組</option>
	</select>
	<select name="group" onChange="multipleNavi()" id="group-items">
		<option value="0">全グループ表示</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
	</select>
</form>