jQueryでselectタグの選択された値によって表示・非表示を切り替える方法

更新日：2016年1月24日

明けましておめでとうございます。
最近何かと忙しくて更新が滞っていました（汗）2016年はどんどん更新していきますので、本年も宜しくお願い致します。
ということで、2016年最初の記事となります。

jQueryでselectタグの選択された値によってある要素を表示させたり、あるいは非表示にしたりといったことは非常に使う機会が多いです。

例えば様々な企業の住所一覧を掲載しているページにおいては、最初は全国の都道府県の企業を表示させておいて、selectタグで「東京」が選択された場合には東京の企業のみを抽出して表示させるといった具合です。

では早速その方法のご紹介です。

まずHTMLには

全て
東京
大阪


東京
大阪

と記述します。

そしてjQueryには

$(".extraction").change(function() {
	var extraction_val = $(".extraction").val();
	if(extraction_val == "全て") {
		$('.tokyo').css('display', 'block');
		$('.osaka').css('display', 'block');
	}else if(extraction_val == "東京") {
		$('.tokyo').css('display', 'block');
		$('.osaka').css('display', 'none');
	}else if(extraction_val == "大阪") {
		$('.tokyo').css('display', 'none');
		$('.osaka').css('display', 'block');
	}
});

と記述すればOK。
これでselectタグで選択された値によって表示・非表示を切り替えることが出来ます。

「全て」が選択された時には東京と大阪を表示し、「東京」が選択された時には東京を表示して大阪を非表示にし、「大阪」が選択された時には大阪を表示して東京を非表示にします。

下記のCSSは視覚的に表示・非表示を分かりやすくする為のもので、全く必要なものではありませんが一応記述しておきます…。

.tokyo, .osaka {
	border: 1px solid #333;
	color: #FFF;
	background-color: #000;
	width: 200px;
	float: left;
	margin-right: 10px;
}

そんなこんなで完成したものがこちら。

全て 東京 大阪

東京

大阪

if文の中を書き換えれば表示・非表示以外にも色々な活用が出来る汎用性の高いjQueryの記述です。