• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:Javascriptでフォームのセレクトボックスの同期をとる方法につい)

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

zeffの回答

  • zeff
  • ベストアンサー率69% (137/198)
回答No.3

たぶんこうなのでは。 クライアントが開始年月日のセレクトボックスを選択(onchange)すると、 終了日のセレクトボックスの年月日を開始日と同じ年月日にセット。 かつ開始日以前には設定できないように開始日以前のoptionをremoveする。 (終了日が開始日以前になってしまわないように) 開始月が次月以降であれば、 開始日のoptionをcreateして全ての日を選択できるようにする。 開始日が決まったら、 クライアントが終了日を選んで(開始日=終了日でもOK) セット(&送信する?)したら作業終了。 開始日も今日以前を選べなくするのであれば、 load時にnew Dateから今日の日付をgetDateして、 開始日のoptionをcreateしなきゃならないのでは。 考えただけで面倒くさそうですね。

yuri805
質問者

補足

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

関連するQ&A

  • セレクトボックス日付同士の比較について

    以下をどなたか教えていただけないでしょうか?よろしくお願いします。 二つのセレクトボックスで年/月/日を作成する。 さらに追加ボタンを押したときに 1.日付を比較しどちらかが一方が存在しない場合アラートを表示する。 2.開始日と終了日が前後していたらアラートを表示する。 3.OKであればテキストボックスに日付を出力する 以上です。javascript初心者ですが、よろしくお願いいたします。

  • セレクトボックスで警告

    Javascriptの初心者です。 セレクトボックスが二つ(a,b)あるとして、 セレクトボックスa中の項目いずれかを選択肢すると、 セレクトボックスbのどの項目をも選択できないようにするため、 警告をだしたいのですが、 よい方法をご教授していただけなでしょうか。 よろしくお願いいたします。

  • javascriptでセレクトボックスを動的に

    javascriptでセレクトボックスの"selected"を動的に変更する方法を教えてください>< 下記のselectedを"10"から"50"に変更したいのですが、 某ASPサービスの環境下での作業のため制約があり直接変更できません。 <body onload="event"> <select name="select"> <option value="10" selected="selected">10件</option> <option value="30">30件</option> <option value="50">50件</option> </select> そこで、JavaScriptで何とかしようと思うのですが、 <select>~ </select>の間(selectタグ含む)は、ASPサービスの制約でIDやclassを入れることもできず、 変更できるのは、body開始タグ部分、headerタグ内、body内(一部)です。 ページを読み込んだ際に、「50件を選択」、「10件からselected外す」状態にしたいです。 いろいろサイトを見てなんとなくできそうな気はするのですが、 スキル的に初心者レベルのため、わかりませんでした。 何卒よろしくお願いします!

  • セレクトボックスの表示方法について

    フォームなので使われるセレクトボックスについてですが、 ↓矢印を押すとセレクトボックスの内容一覧が表示されますよね。 その表示がまれに上側に出てしまうことがあるのですが、 その表示を絶対に下側に出るように指定することって出来ますか? ご存知方がいらっしゃいましたら、教えて下さい。 よろしくお願い致します。

  • セレクトボックスのデータをリストボックスへ書き出す

    javascript初心者です。よろしくお願いします。 まず年月日を3つのセレクトボックスで作成する。 追加ボタンを押すと、選択した年月日のデータをリストボックスに書き出すことができる。 ※ここでリストボックスのサイズは3に指定しておき、項目が3以上の場合はスクロールさせる。 さらに削除ボタンを作成し、リストからデータを削除できるようにする。 以上のような仕組みを作りたいのですが... どうかよろしくお願いいたします。

  • javascriptでセレクトボックスの"selected"を動的につ

    javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。 現在、以下のようなフォームを作成しました。 <select name='year'> <option value='2010'>2010</option> <option value='2011'>2011</option> </select>年 <select name='month'> <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> <option value='6'>6</option> <option value='7'>7</option> <option value='8'>8</option> <option value='9'>9</option> <option value='10'>10</option> <option value='11'>11</option> <option value='12'>12</option> </select>月 <select name='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> <option value='6'>6</option> <option value='7'>7</option> <option value='8'>8</option> <option value='9'>9</option> <option value='10'>10</option> <option value='11'>11</option> <option value='12'>12</option> <option value='13'>13</option> <option value='14'>14</option> <option value='15'>15</option> <option value='16'>16</option> <option value='17'>17</option> <option value='18'>18</option> <option value='19'>19</option> <option value='20'>20</option> <option value='21'>21</option> <option value='22'>22</option> <option value='23'>23</option> <option value='24'>24</option> <option value='25'>25</option> <option value='26'>26</option> <option value='27'>27</option> <option value='28'>28</option> <option value='29'>29</option> <option value='30'>30</option> <option value='31'>31</option> </select>日 このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか? よろしくお願いします。

  • セレクトボックスの内容をリストで出したい

    セレクトボックスをクリックしたりすると セレクトボックスの内容が ぱっと下方へ延びてリスト表示されますが、 あの状態をjavascriptで実現したいのです。 どう指定したらよいでしょうか。 FORCUS関数では、フォーカスが移るだけだし。。 ご存知でしたら、教えて下さい。 よろしくお願いします。

  • PHPフォーム中のJavascriptの送信

    PHPフォームの中にJavascriptで作成したSelectを配置しPOSTしたところ、Javascript部分だけが情報が取得できません。 具体的には、年月日の月のSelectは通常に表示し、月を選択した際、その月の日数をJavascriptのonChangeで取得してSelectを作成し、innerHTMLで表示させています。 ソースで見た時はIDの指定だけですが、FireBugなどで見るときちんとしたソースで表示されていますが、こういう形のJavascriptの混在はできないのでしょうか? そうだとしたら、通常はどういう処理をしているのか、ご存知の方が居たら教えてください。

    • 締切済み
    • PHP
  • 自動的に日付が変るセレクトボックス

    コストを算出するcgiに条件を送信する、下のようなhtmlのフォームを機能アップする方法が解らずに困っています。 -------------------------- 納品形態1 数量[1]  [2004年] [1月] [1日] [単品]  [算出] 納品形態2 数量[1] [2004年] [1月] [1日] [単品] [算出] 納品形態3 数量[1] [2004年] [1月] [1日] [単品] [算出] -------------------------- 2004年か2005年、1月~12月、1日~31日、単品かロットか、数量をそれぞれセレクトボックスで選択するようにしてあるのですが、 ページを開いた時に選ばれている数値は当然「selected」で指定して NAME="tanni" VALUE="0" SIZE="2"><BR> 納品日 <SELECT NAME="nouhin1"> <OPTION VALUE="2004" SELECTED>2004年 <OPTION VALUE="2005">2005年 </SELECT><SELECT NAME="nouhin2"> <OPTION VALUE="1" SELECTED>1月 <OPTION VALUE="2">2月 … という形になっているので、同じく当然ですが、いつアクセスしても2004年1月1日が選ばれています。 これを、いつアクセスしても今日の日付の5日後の日付がselectedになるようにしたいのですが、方法はあるでしょうか? 「Javascript組めば?」と知人に言われましたが、私は既存のソースの設定値や文字列を打ち変えるくらいしか出来ません。 どこかで、このような目的に合致するスクリプトを配付して下さるサイトはないでしょうか? もしくは、どなたか、ソースを教えて頂けないでしょうか? どうかよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 2つのセレクトボックスを連動させたい

    2つのセレクトボックスを連動させて、 片方の選択を変更すると、もう一方の選択できる範囲が限定されるようにしたい。 下記のようなソースでセレクトボックスを2つ表示させています。 jQueryを使用しています。 それぞれ「開始年」「終了年」という意味合いで、 取得する値から、「年の範囲」を決定するものです。「option」の「value」には、西暦の4桁の数字が入るようにしています。 そこで、「開始年」選択を変更させたときに、「終了年」のセレクトが開始年よりも古い年を選択できないように連動させたいのですが、何かいい方法はないでしょうか。 ※「送信」ボタンをクリックした際に、警告文を表示するのではなく、 2つのセレクトを連動される形で実現させたいと考えております。 ↓↓【記述コード】---------------------------------------------- 開始年:<select name="year_start" id="feas_1_1"></select> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = init_year; i <= year; i++) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_1').append('<option value="' + i + '">' + era + s +'年( '+ i+ '年)</option>'); } </script> 終了年:<select name="year_end" id="feas_1_2"></select> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = year; i >= init_year; i--) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_2').append('<option value="' + i + '">' + era + s +'年( '+ i + '年)</option>'); } </script>