【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集

Javascriptでフォームのセレクトボックスの同期をとる方法につい

解決済

  • 質問者：yuri805
  • 質問日時：
  • 回答数：3件

Javascriptでフォームのセレクトボックスの同期をとる方法について質問させてください。

フォームに「期間を指定」するための【開始日】と【終了日】という項目があり、それぞれにセレクトボックスで年、月、日を指定するようになっています。

このセレクトボックスの【開始日】を仮に　2010年　９月　27日　に設定したら、自動的に【終了日】もそれに合わせて　2010年　9月　27日　と変化するようにしたいと思います。

私なりに調べてみたのですが、こういった処理をなんと呼ぶのかもわからず、うまく検索できませんでした。

どなたか解決策をご存じの方がいらっしゃいましたら、ご意見をください。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

全体に何をしたいのか不明なので・・・




役には立たないと思うけれど、ご質問のように動くもの。
（追加質問は無しね）

<!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>

この回答への補足

ご返答ありがとうございます。
いただいたご意見を参考に取り組んでみたいと思います。

補足日時：2010/09/27 18:13
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： zeff#1
  • 回答日時：

たぶんこうなのでは。



クライアントが開始年月日のセレクトボックスを選択（onchange)すると、
終了日のセレクトボックスの年月日を開始日と同じ年月日にセット。
かつ開始日以前には設定できないように開始日以前のoptionをremoveする。
（終了日が開始日以前になってしまわないように）

開始月が次月以降であれば、
開始日のoptionをcreateして全ての日を選択できるようにする。

開始日が決まったら、
クライアントが終了日を選んで（開始日＝終了日でもOK）
セット（＆送信する？）したら作業終了。

開始日も今日以前を選べなくするのであれば、
load時にnew Dateから今日の日付をgetDateして、
開始日のoptionをcreateしなきゃならないのでは。
考えただけで面倒くさそうですね。

この回答への補足

ご返答ありがとうございます。

javascriptは初心者でよくわからないのですが、いただいたご意見を参考に取り組んでみたいと思います。

補足日時：2010/09/27 18:11
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

【開始日】を選択すれば、自動的に【終了日】が決まるならば、


わざわざ「期間を指定」のフォームに【終了日】のセレクトボックス
は不要ではありませんか？

それとも、【終了日】のデフォルトのオプション値を、【開始日】に
合わせて、生成するという意味ですか？

　それにしても、【終了日】の条件が不明ですね。

この回答への補足

言葉が足らずに申し訳ありません。

ご意見のとおり、開始日を選択した際に、終了日のデフォルト値が開始日になるということです。

補足日時：2010/09/27 18:10
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報