![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
Javascriptでフォームのセレクトボックスの同期をとる方法について質問させてください。
フォームに「期間を指定」するための【開始日】と【終了日】という項目があり、それぞれにセレクトボックスで年、月、日を指定するようになっています。
このセレクトボックスの【開始日】を仮に 2010年 9月 27日 に設定したら、自動的に【終了日】もそれに合わせて 2010年 9月 27日 と変化するようにしたいと思います。
私なりに調べてみたのですが、こういった処理をなんと呼ぶのかもわからず、うまく検索できませんでした。
どなたか解決策をご存じの方がいらっしゃいましたら、ご意見をください。
よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
全体に何をしたいのか不明なので・・・
役には立たないと思うけれど、ご質問のように動くもの。
(追加質問は無しね)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function sample(evt) {
var t = evt.target || evt.srcElement;
t.form.elements[t.name.replace(/^start/, "end")].selectedIndex = t.selectedIndex;
}
//-->
</script>
</head>
<body>
<form>
<div>
【開始日】
<select name="start_year" onchange="sample(event)">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
年
<select name="start_month" onchange="sample(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
月
<select name="start_day" onchange="sample(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
日
</div>
<div>
【終了日】
<select name="end_year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
年
<select name="end_month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
月
<select name="end_day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
日
</div>
</form>
</body>
</html>
No.3
- 回答日時:
たぶんこうなのでは。
クライアントが開始年月日のセレクトボックスを選択(onchange)すると、
終了日のセレクトボックスの年月日を開始日と同じ年月日にセット。
かつ開始日以前には設定できないように開始日以前のoptionをremoveする。
(終了日が開始日以前になってしまわないように)
開始月が次月以降であれば、
開始日のoptionをcreateして全ての日を選択できるようにする。
開始日が決まったら、
クライアントが終了日を選んで(開始日=終了日でもOK)
セット(&送信する?)したら作業終了。
開始日も今日以前を選べなくするのであれば、
load時にnew Dateから今日の日付をgetDateして、
開始日のoptionをcreateしなきゃならないのでは。
考えただけで面倒くさそうですね。
この回答への補足
ご返答ありがとうございます。
javascriptは初心者でよくわからないのですが、いただいたご意見を参考に取り組んでみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Selectボックスの一覧表示方法
-
同じ名前のセレクトがある場合...
-
スマホのフォームでのselect複...
-
select要素のvalueを配列で取得...
-
javascriptでセレクトボックス...
-
selectが変更されたらnameを指...
-
jsでは、'で区切った部分を改行...
-
全てのselect要素をデフォルト...
-
2段階プルダウンで1段階目の選...
-
selectを変更不可にしたい
-
プルダウンからの背景色変更
-
検索窓とプルダウンメニュー機...
-
javascriptでの時間計算
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
Selectボックスの幅を自動で広...
-
submitした値を返したい
-
javaScriptの変数をJavaの変数...
-
プルダウンで選択すると、DBの...
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
同じ名前のセレクトがある場合...
-
全てのselect要素をデフォルト...
-
【javascript】連想配列からセ...
-
スマホのフォームでのselect複...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
webページの一部のみの更新につ...
-
selectのすべての値を送信する方法
-
プルダウンのoptionの表示・非...
-
javascript:データを日本語で...
-
C#(csファイル)とjavascriptと...
-
リストボックス内の重複したも...
-
select要素のvalueを配列で取得...
おすすめ情報