• ベストアンサー

○日後から○日間分のセレクトボックス:どこを直せばでいいのしょう?

お世話になります。 友人から、「セレクトボックスの日付の並びがおかしい。直してほしい」と頼まれたのですが、開いてみたらJavascriptでした。 <option value = '' selected>------</option> <script language="javascript"> var Today = new Date(); var d = new Date(); var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" ); /* 2日後~14日後 までを表示 */ for ( var i = 2; i < 15; i++ ){ d.setDate( Today.getDate() + i ); /* 各要素を抽出(月と日は2桁で)*/ var sYer = "" + d.getFullYear(); var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );; var sDat = ( "00" + d.getDate() ).match( /..$/ ); var sDay = Youbi[ d.getDay() ]; /* <option>を書き出し */ document.write( "<option value = '" + sYer + sMon + sDat + "'>" + sYer + "年" + sMon + "月" + sDat + "日(" + sDay + ")</option>\n" ); } </script> </select> となっているのですが、現状ですと、このスクリプトで出来たセレクトボックスの最上段の、明後日の日付から来月の1日までの日付はちゃんと表示されるのですが、その先がいきなり1ヶ月跳んでその次は1ヶ月と2日跳んで…といった表示になってしまいます。 2006年04月29日(土) 2006年04月30日(日) 2006年05月01日(月) 2006年06月01日(木) 2006年07月03日(月) 2006年08月03日(木) 2006年09月04日(月) と言った具合です。 私はこのスクリプトを見ても計算内容か殆ど理解できないので、バグを見つけて直すことが出来ません。 このスクリプトで、月や年をまたいでも正常に「今日の2日後から14日間分」のセレクトボックスを表示できるようにするにはどこをどう書き換えれば良いのでしょうか? お手数ですが、どうかよろしくお願いします。

  • MORGEN
  • お礼率100% (466/466)

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

とりあえず、以下の修正でどうでしょうか? ×var Today = new Date(); →使わないので削除 ×d.setDate( Today.getDate() + i ); ○d.setDate( d.getDate() + 1 );

MORGEN
質問者

お礼

早々にどうもありがとうございました。 PCのカレンダーをいろんな日付に直して試してみましたが、どんな設定でも完璧に対応できました。 「正」+「誤」という形で教えて頂くのも、「へぇー、何でこれで直るんだろう?」と考えるにも分かりやすく、とてもありがたいです。 どうもお世話になりました!!

その他の回答 (1)

noname#22259
noname#22259
回答No.2

<select> <option value = '' selected>------</option> <script language="javascript"> //var Today = new Date(); //var d = new Date(); var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" ); /* 2日後~14日後 までを表示 */ for ( var i = 2; i < 15; i++ ){ var d = new Date(); d.setDate( d.getDate() + i ); /* 各要素を抽出(月と日は2桁で)*/ var sYer = "" + d.getFullYear(); var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );; var sDat = ( "00" + d.getDate() ).match( /..$/ ); var sDay = Youbi[ d.getDay() ]; /* <option>を書き出し */ document.write( "<option value = '" + sYer + sMon + sDat + "'>" + sYer + "年" + sMon + "月" + sDat + "日(" + sDay + ")</option>\n" ); } </script> </select>

MORGEN
質問者

お礼

どうもありがとうございます。 「自信なし」とのことですが、いろんな日付設定で試しても完全に対応してくれるスクリプトになりました。#1のyambejpさんとはまた別の方法でも出来るんですね。 正解が一つでないというのも非常に興味深いです。 使いやすい形でのソースのご提示、どうもありがとうございました!

関連するQ&A

  • 毎週土曜日のみの日付を取得、プルダウンリストに表示させたい。

    毎週土曜日のみの日付を取得、プルダウンリストに表示させたい。 よろしくお願い致します。 表題の通りなのですが、Javascriptで「毎週土曜日の日付のみ」を取得して、 プルダウンリストで表示・選択させたいと考えております。 以前、任意での指定日以降(明日や明後日など)の日付と曜日を取得して、 プルダウンで表示・選択できるコード(下記のものです)を教えて頂いたのですが、 このような感じで土曜日の日付のみを表示・選択できるようになると理想です。 <script language="javascript"> //var Today = new Date(); //var d = new Date(); var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" ); /* ひと月後までを表示 */ for ( var i = 3; i < 31; i++ ){ var d = new Date(); d.setDate( d.getDate() + i ); /* 各要素を抽出(月と日は2桁で)*/ var sYer = "" + d.getFullYear(); var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );; var sDat = ( "00" + d.getDate() ).match( /..$/ ); var sDay = Youbi[ d.getDay() ]; /* <option>を書き出し */ document.write( "<option value = '" + sYer + "年" +sMon + "月" + sDat + "日" + "'>" +sYer + "年" + sMon + "月" + sDat + "日(" + sDay + ")</option>\n" ); } </script> もしお分かりの方がいらっしゃいましたら、ご教授頂けると幸いです。 どうぞよろしくお願い致します。

  • SELECTの生成でselected設定ができない

    全くもって原因がわからず、行き詰まっています。 どなたか助けてください。宜しくお願いします。 <script> window.onload=function(){ var now=new Date(); var nowDay=now.getDate(); var objD=document.FRM.selD; for(i=0; i<31; i++){ d=i+1; objD.options[i] = new Option(d+"日", d); if(d==nowDay){ objD.options[i].selected=true; } } } </script> <form name="FRM"> <select name="selD"></select> </form>

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

  • JavaScriptのセレクトボックスの連動について

    JavaScriptにて連動するセレクトボックスを作成しました。 ソースは下記となります。 ==================================================== <html> <head> <title>複数のSELECT タグ連動</title> <script type="text/javascript"> <!-- function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; var child = childArray[document.getElementById(idParent).selectedIndex]; document.getElementById(idChild).length=child.length; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i].text = child[i]; } } var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); // --> </script> </head> <body> <form name="myform" method="POST" action"#"> <select id="parent_0" onchange="selectBox(0)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_0"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_1" onchange="selectBox(1)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_1"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_2" onchange="selectBox(2)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_2"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> </form> </body> </html> ==================================================== 上記のソースで想定の動きをしてくれているのですが、 例えば、 神奈川県 小田原市 と選択し、ブラウザの更新をかけると、 神奈川県 渋谷区 になってしまいます。 ブラウザの更新をかけた際に、 双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか? よろしくお願いします。

  • JavaScripで使える文字列

    JavaScriptで下記のように0~50までの数字を書き出すスクリプトを使いたいのですが、使っているショッピングカートの関係で<select>文の中のnameタグにo-a、o-Aなど、o(アルファベット小文字のオー)と-(ハイフン)を記述しないといけない状態なのですが、o-を記述するとJavascriptが動かなくなります。。。 恐らくハイフンだと思うのですが、プラグラム上の仕様なのでしょうか。。。 A:<select name="o-A" onChange="check(this)"> <option value = '' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select> どなたかおわかりになる方、ご教授頂ければ幸いです。

  • セレクトボックス連動

    過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>

  • 連動するセレクトボックスの内容を増やしたい

    お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが3つなのですが、 7つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>

  • 数によってボタンを有効化したい

    先日もこちらでお世話になりました。 例えばアメ玉の販売をするのにA,B,C,3種類があり、合計数がDと同じにならないと実行ボタンが押せないようにしたいのですが、うまくいきません。 <head> <SCRIPT TYPE="text/javascript"> <!-- function check(obj){ var f=obj.form; var valA=parseInt(f.A.value); var valB=parseInt(f.B.value); var valC=parseInt(f.C.value); var valD=parseInt(f.D.value); if (valA+valB+valC > valD || valA+valB > valD || valB+valC > valD || valA+valC > valD){ alert('A,B,Cの和は100以下に設定ください') if(obj.type=="select-one") obj.selectedIndex=0; else if(obj.type=="text") obj.value=0; obj.focus(); } } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio(valD){ if (valD.value == valA+valB+valC || valA+valB || valB+valC || valA+valC ) valD.form.submit.disabled = false; else valD.form.submit.disabled = true; } //--> </SCRIPT> </head> <body bgcolor=#ffffff> <form name="" method="post" action="shop.cgi"> <b>☆飴玉 </b> <br> <b>個数配分</b><br> A:<select name="A" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select><br> B:<select name="B" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select><br> C:<select name="C" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + ")'>" + sDat + "</option>\n" ); } </script> </select><br> D:<input type="text" name="D" readonly value="50" class="num"></br> <input type="submit" value="申し込む" name="submit" disabled> </form> </body> 詳しくわからないのですが、イベントハンドラは2つ続けて書けないのでしょうか。。。 どなたかお教え頂けたら幸いです。

  • 3連セレクトボックスで選択肢を変更し条件を絞り込む

    現在、JavaScriptの勉強中です。 三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。 例えば最初のセレクトボックスで「都道府県」を選択させ、選んだ段階で、二番目のセレクトボックスに選んだ都道府県の中にある「市町村」を表示させる、 次に二番目の「市町村」の一つを選んだ段階で、三番目のセレクトボックスに選んだ「市町村」内の支店名を表示させ選択させる。というものです。 以下のようなソースがあるのですが、この内容だと、最初の選択肢の数が10個を超えた段階で次の選択肢が作動しなくなる事が、 動作上で確認されました。 一つのセレクトボックスの選択肢の数を100個程度、或いは、理論上無制限にするには、どの様にしたらよいかを考えています。 できれば、現在のソースのロジックの解説も併せて、ご教授頂ければ幸いです。 以下JavaScript内容--------------- var data = new Array("都道府県は?","東京都","神奈川","千葉"); var data0 = new Array("---"); var data1 = new Array("区は?","千代田区","中央区","品川区");    var data2 = new Array("市町村は?","横浜市","川崎市");     var data3 = new Array("市町村?","千葉市","市原市");     var data10 = new Array("---"); var data11 = new Array("支店名は?","千代田1号店","千代田2号店","千代田3号店"); var data12 = new Array("支店名は?","中央区1号店","中央区2号店","中央区3号店","中央区4号店","中央区5号店"); var data13 = new Array("支店名は?","品川1号店","品川2号店"); var data20 = new Array("---"); var data21 = new Array("支店名は?","横浜1号店","横浜2号店","横浜3号店","横浜4号店"); var data22 = new Array("支店名は?","川崎1号店","川崎2号店","川崎3号店"); var data30 = new Array("---"); var data31 = new Array("支店名は?","千葉1号店","千葉2号店"); var data32 = new Array("支店名は?","市原1号店"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ obj.options[i] = new Option(arr[i]); obj.options[i].value = arr[i];}} 以下、HTML内容--------------- <body onLoad="SetList('sel0', data);" style="margin:0px;"> <div> <form> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel2',data0);SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;" onChange="SetList('sel2', eval('data' + document.forms[0].sel0.selectedIndex + this.selectedIndex))"> <option>---</option> </select> <select id="sel2" name="sel2" style="width:160px;"> <option>---</option> </select> </form> </div> </body>

  • 今日の日付を自動的にセレクトしたいのですが・・・。

    うまくできません。 どなたか助けていただけないでしょうか? よろしくおねがいします。 今のソースはこんな状態です。 onChange="setDate(this.form);"は4月の時に30日までとかにつかっています。 <!--最初に今日の日付を選択したい--> var date=new Date(); var year = date.getYear(); var year= (year< 2000) ? year+1900 : year; var mon=date.getMonth(); var day=date.getDate(); alert(mon); function setNow(form){ for(var i = 0;i<document.nanngatu.nanngatu.options.length;i++){ if(document.nanngatu.nanngatu.options[i].text==mon){ document.nanngatu.nanngatu.options.selectedIndex=i; break; } } } --間は省略-- <onLoad="setNow(this.form)" > <form name="nanngatu"> <select name="nanngatu" onChange="setDate(this.form);" > <option value="32">1</option> <option value="30">2</option> <option value="32">3</option> <option value="31">4</option> <option value="32">5</option> <option value="31">6</option> <option value="32">7</option> <option value="31">8</option> <option value="32">9</option> <option value="31">10</option> <option value="32">11</option> <option value="31">12</option> </select>月