- ベストアンサー
Javascriptでフォームのセレクトボックスの同期をとる方法につい
- フォームのセレクトボックスの同期をとる方法について質問します。開始日と終了日を指定するセレクトボックスがあります。開始日を設定すると、終了日もそれに合わせて変化させたいです。
- Javascriptを使用して、フォームのセレクトボックスの同期をとる方法を探しています。具体的には、開始日を選択すると、終了日もそれに合わせて変化するようにしたいです。
- フォームのセレクトボックスで開始日と終了日を指定する際に、開始日を選択すると自動的に終了日も同じ日付になるようにしたいです。Javascriptを利用してどのように実装できるか教えてください。
- yuri805
- お礼率39% (13/33)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
全体に何をしたいのか不明なので・・・ 役には立たないと思うけれど、ご質問のように動くもの。 （追加質問は無しね） <!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>
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
たぶんこうなのでは。 クライアントが開始年月日のセレクトボックスを選択（onchange)すると、 終了日のセレクトボックスの年月日を開始日と同じ年月日にセット。 かつ開始日以前には設定できないように開始日以前のoptionをremoveする。 （終了日が開始日以前になってしまわないように） 開始月が次月以降であれば、 開始日のoptionをcreateして全ての日を選択できるようにする。 開始日が決まったら、 クライアントが終了日を選んで（開始日＝終了日でもOK） セット（＆送信する？）したら作業終了。 開始日も今日以前を選べなくするのであれば、 load時にnew Dateから今日の日付をgetDateして、 開始日のoptionをcreateしなきゃならないのでは。 考えただけで面倒くさそうですね。
補足
ご返答ありがとうございます。 javascriptは初心者でよくわからないのですが、いただいたご意見を参考に取り組んでみたいと思います。
- yyr446
- ベストアンサー率65% (870/1330)
【開始日】を選択すれば、自動的に【終了日】が決まるならば、 わざわざ「期間を指定」のフォームに【終了日】のセレクトボックス は不要ではありませんか？ それとも、【終了日】のデフォルトのオプション値を、【開始日】に 合わせて、生成するという意味ですか？ それにしても、【終了日】の条件が不明ですね。
補足
言葉が足らずに申し訳ありません。 ご意見のとおり、開始日を選択した際に、終了日のデフォルト値が開始日になるということです。
補足
ご返答ありがとうございます。 いただいたご意見を参考に取り組んでみたいと思います。