- ベストアンサー
セレクトボックスの連動処理について
- JavaScript勉強中の方が、日付の入るセレクトボックスを２つ用意し、片方のセレクトボックスの日付を選択すると、もう片方のセレクトボックスに●日後の日付選択肢が表示される連動処理について質問です。
- 質問者はJavaScriptを勉強中で、動的なセレクトボックスの連動処理について不安があります。日付を選択すると、指定した日数後の日付が表示されるような連動処理について教えてください。
- JavaScriptを勉強中の方が、日付の選択肢が動的に連動するセレクトボックスを作成したいと思っています。具体的には、片方のセレクトボックスで日付を選択すると、もう片方のセレクトボックスには指定した日数後の日付が表示されるようにしたいです。どのように実装すればよいでしょうか？
- yuko8320
- お礼率24% (8/33)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞正しくは「3日後」ではなく「3日後以降」でした。 要領は同じですので、少々不足気味のサンプルにはなっていたと思いますが？ …まぁ、こんな感じでしょうか？ （dayが未入力の場合は、day2の入力ができないようにしています。） スクリプトOFFの場合を考えると、phpからはその場合でも良いようにday2のオプション内容を出力しておくのが良いと思います。 <html> <head> <style type="text/css"> select { width: 150px; } </style> <script type="text/javascript"> window.onload = function(){ set(); } function set() { var elm = document.forms['frm1'].elements['day']; var e = document.forms['frm1'].elements['day2']; var i = 0, d, txt, v = elm.value=='default'?null:elm.value; e.options.length = 0, e.disabled = true; if (v) { while (i<14) { d = new Date(v); d.setHours(24*i+72); txt = d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate(); e.options[i++] = new Option(txt,txt); } e.disabled = false; } } </script> </head> <body> <form name="frm1"> Day : <select name="day" onchange="set();"> <option value="default">▲日付を選んで下さい</option> <option value="2009/8/24">2009/8/24</option> <option value="2009/8/25">2009/8/25</option> <option value="2009/8/26">2009/8/26</option> <option value="2009/8/27">2009/8/27</option> </select> <p>Day2: <select name="day2"> <option value="2009/8/27">2009/8/27</option> <option value="2009/8/28">2009/8/28</option> <option value="2009/8/29">2009/8/29</option> <option value="2009/8/30">2009/8/30</option> <!-- ・・・・・・・・ --> </select> </form> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
「3日後」というのが固定値であるならば、2番目の値がセレクトボックスになっている意味が不明ですが… （ユーザが変更可能なので） とりあえず、2個のセレクトボックスの値が3日差で最初にセットされているという仮定のもとで、1番目の値を変更すれば2番目のものも同じインデックス番号にセットするサンプルです。 （HTML（script）サンプルです。 2番目を変更しても何もしません。） <html> <head></head> <body> Day : <select name="day" style="margin-right: 50px" onchange= "document.getElementById('day2').options[this.options.selectedIndex].selected=true;"> <option value="default">▲日付を選んで下さい</option> <option value="2009/8/24">2009/8/24</option> <option value="2009/8/25">2009/8/25</option> <option value="2009/8/26">2009/8/26</option> <option value="2009/8/27">2009/8/27</option> </select> <br>Day2: <select name="day2" id="day2" style="margin-right: 50px"> <option value="default">▲日付を選んで下さい</option> <option value="2009/8/27">2009/8/27</option> <option value="2009/8/28">2009/8/28</option> <option value="2009/8/29">2009/8/29</option> <option value="2009/8/30">2009/8/30</option> </select> </body> </html>
補足
早速にサンプルいただきまして、ありがとうございます！！ > 「3日後」というのが固定値であるならば、2番目の値がセレクトボックスになっている意味が不明ですが… （ユーザが変更可能なので） 失礼いたしました。質問の意図が誤っていました。 正しくは「3日後」ではなく「3日後以降」でした。 「3日後」が自動的に選択されるのではなく、「3日後以降」から 向こう2週間の日付が選択肢として表示されるようにしたいのです。 例えば、8/25を選ぶと8/28～9/10。 8/26を選ぶと8/29～9/11。といった具合です。 日本語がおかしくてお手数おかけいたしましたが、 宜しくお願いいたします。
お礼
ありがとうございます！ ソースをわざわざいただけて感激です！！ JSだとこういう風になるんですね。 ちょっとわからない部分もありますが大分要領が掴めました！ ありがとうございました！