【フォーム】select内optionのvalue値を取得してコンテンツ表示

セレクトボックスから都道府県を選んで選択ボタンを押すと、選択された地域を表示します。select内optionのvalue値をjQueryで取得し、地域が記述されたpタグの中から表示するpタグを判定しています。

選択された地域は

都道府県を選択して下さい

北海道

東北

関東

甲信越

北陸

東海

近畿

中国

四国

九州

沖縄

htmlのコードは下記になります。
optionのvalueに地域ごとに分類した数値を設定します。何も選択されていない「都道府県」の項目はvalueを0に設定します。formタグの直後に地域が記述されたpタグを配置し、class=”select_txt”を付与します。何も選択されていない時に表示させる「都道府県を選択して下さい」のpタグはclass=”select_txt_off”を付与します。

<form class="select_form" action="">
	<select id="select_search">
			<option value="0" selected="selected">都道府県</option>
		<optgroup label="北海道">
			<option value="1">北海道</option>
		</optgroup>
		<optgroup label="東北">
			<option value="2">青森県</option>
			<option value="2">岩手県</option>
			<option value="2">宮城県</option>
			<option value="2">秋田県</option>
			<option value="2">山形県</option>
			<option value="2">福島県</option>
		</optgroup>
		<optgroup label="関東">
			<option value="3">茨城県</option>
			<option value="3">栃木県</option>
			<option value="3">群馬県</option>
			<option value="3">埼玉県</option>
			<option value="3">千葉県</option>
			<option value="3">東京都</option>
			<option value="3">神奈川県</option>
		</optgroup>
		<optgroup label="甲信越">
			<option value="4">山梨県</option>
			<option value="4">長野県</option>
			<option value="4">新潟県</option>
		</optgroup>
		<optgroup label="北陸">
			<option value="5">富山県</option>
			<option value="5">石川県</option>
			<option value="5">福井県</option>
		</optgroup>
		<optgroup label="東海">
			<option value="6">岐阜県</option>
			<option value="6">静岡県</option>
			<option value="6">愛知県</option>
			<option value="6">三重県</option>
		</optgroup>
		<optgroup label="近畿">
			<option value="7">滋賀県</option>
			<option value="7">京都府</option>
			<option value="7">大阪府</option>
			<option value="7">兵庫県</option>
			<option value="7">奈良県</option>
			<option value="7">和歌山県</option>
		</optgroup>
		<optgroup label="中国">
			<option value="8">鳥取県</option>
			<option value="8">島根県</option>
			<option value="8">岡山県</option>
			<option value="8">広島県</option>
			<option value="8">山口県</option>
		</optgroup>
		<optgroup label="四国">
			<option value="9">徳島県</option>
			<option value="9">香川県</option>
			<option value="9">愛媛県</option>
			<option value="9">高知県</option>
		</optgroup>
		<optgroup label="九州">
			<option value="10">福岡県</option>
			<option value="10">佐賀県</option>
			<option value="10">長崎県</option>
			<option value="10">熊本県</option>
			<option value="10">大分県</option>
			<option value="10">宮崎県</option>
			<option value="10">鹿児島県</option>
		</optgroup>
		<optgroup label="沖縄">
			<option value="11">沖縄県</option>
		</optgroup>
	</select>
	<button class="select_btn" type="button">選択</button>
</form>
<div class="select_box">
	<p class="select_title">選択された地域は</p>
	<p class="select_txt_off">都道府県を選択して下さい</p>
	<p class="select_txt">北海道</p>
	<p class="select_txt">東北</p>
	<p class="select_txt">関東</p>
	<p class="select_txt">甲信越</p>
	<p class="select_txt">北陸</p>
	<p class="select_txt">東海</p>
	<p class="select_txt">近畿</p>
	<p class="select_txt">中国</p>
	<p class="select_txt">四国</p>
	<p class="select_txt">九州</p>
	<p class="select_txt">沖縄</p>
</div>

続いてCSSのコードです。
地域が記述されたクラス名select_txtのpタグは非表示にしておきます。

.select_form {
	display: block;
	position: relative;
	margin: 0 0 15px;
	padding: 0 120px 0 0;
}
#select_search {
	width: 100%;
	margin: 0;
	padding: 5px;
	font-size: 100%;
	border: solid 1px #e1e1e1;
	border-radius: 3px;
}
.select_btn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100px;
	border: 0;
	border-radius: 3px;
	background: #707070;
	font-size: 100%;
	color: #fff;
	cursor: pointer;
}
.select_box {
	margin: 0;
	padding: 10px;
	background: #EFEFEF;
}
.select_title {
	margin: 0 0 7px;
	text-align: center;
	font-size: 120%;
	color: #333;
	font-weight: bold;
}
.select_txt_off {
	margin: 0;
	padding: 13px 0;
	background: #fff;
	text-align: center;
	font-size: 120%;
	color: #333;
	border-radius: 3px;
}
.select_txt {
	display: none;
	margin: 0;
	padding: 13px 0;
	background: #fff;
	text-align: center;
	font-size: 120%;
	color: #333;
	font-weight: bold;
	border-radius: 3px;
}

最後にjQueryのコードです。
選択ボタンをクリックした時の処理になります。まずvalを利用して選択された都道府県のvalue値を変数dataに格納します。次にいったん地域が記述されたpタグと何も選択されていない時に表示させる「都道府県を選択して下さい」のpタグを非表示にします。そして都道府県のvalue値が0の場合はページ表示時と同じ状態に、それ以外の場合は地域が記述されたpタグを表示します。都道府県のvalue値からマイナス1した数値が地域が記述されたpタグの順番になります。それをeqを利用して判定し表示させています。

$(function() {
	$(".select_btn").on('click', function() {
		var data = $("#select_search").val();
		$(".select_txt_off,.select_txt").css({"display":"none"});
		if(data == 0){
			$(".select_txt_off").css({"display":"block"});
		}else{
			$(".select_txt").eq(data - 1).css({"display":"block"});
		}
	});
});
タイトルとURLをコピーしました