フォームでjQuery を使って、年月日それぞれのプルダウンメニューを、1つの項目にまとめたい

スマートフォン向けに年月日を選択できるWeb フォームで、それぞれ個別にプルダウン選択できるようにしたい。でも、送信する項目はひとまとめにしたい。

フォーム例

対応

年月日をそれぞれ3つのプルダウンメニューを作る
年月日をまとめるフォーム”mydate” を hidden で追記
ID を割り振って、onChange でonChangeDate() を実行
- 年月日それぞれの選択された値を取得して、”mydate”のvalue に設定

ソース

<input type="hidden" id="mydate" name="mydate" value="" />
<select id="myyear" onchange="onChangeDate();">
	<option value="">--</option>
	<option value="2018">2018</option>
	<option value="2019">2019</option>
</select>年
<select id="mymonth" onchange="onChangeDate();">
	<option value="">--</option>
	<option value="1">1</option>
	<option value="2">2</option>
</select>月
<select id="myday" onchange="onChangeDate();">
	<option value="">--</option>
	<option value="1">1</option>
	<option value="2">2</option>
</select>日

<script type="text/javascript">
	function onChangeDate() {
		var myyear = jQuery("#myyear").val();
		var mymonth = jQuery("#mymonth").val();
		var myday = jQuery("#myday").val();
		jQuery("#mydate")
				.val(myyear + "年" + mymonth + "月" + myday + "日");
	}
</script>

</select>年

</select>月

</select>日

function onChangeDate() {

var myyear = jQuery("#myyear").val();

var mymonth = jQuery("#mymonth").val();

var myday = jQuery("#myday").val();

jQuery("#mydate")

.val(myyear + "年" + mymonth + "月" + myday + "日");

}

</script>

対応

ソース

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル