selectを選択してページ遷移する

selectで選択したページに遷移するサンプルを作ってみます。

サンプルコード

JavaScriptで実装する場合。

HTML

遷移先のURLは各valueに設定します。

<select id="select">
	<option value="">選択してください</option>
	<option value="https://www.google.co.jp/">Google</option>
	<option value="http://www.yahoo.co.jp/">Yahoo</option>
	<option value="http://www.amazon.co.jp/">Amazon</option>
</select>

JavaScript

window.onload = function() {
	// select変更時
	document.getElementById('select').onchange = function() {
		// 遷移先URL取得
		var url = this.options[this.selectedIndex].value;
		// URLが取得できていればページ遷移
		if(url != '') {
			location.href = url;
		}
	};
};

7行目のif文は、ページ遷移後にブラウザバックで戻ってきた場合、selectの初期値が1番目でないことがあるので入れています。
選択したページに遷移するデモページ
　

jQueryを使って実装する場合。

JavaScript

$(function() {
	// select変更時
	$('#select').on('change', function() {
		// 遷移先URL取得
		var url = $(this).val();
		// URLが取得できていればページ遷移
		if(url != '') {
			location.href = url;
		}
	})
});

選択したページに遷移するデモページ2