- ベストアンサー
年・月・日の3つのselectメニューを1つのクエリーにしたい
下のような3つに分かれたセレクトメニューを入力したあとに、 <input type="text" name="date" value="2007-1-1">と入力した場合と同じように ひとつのクエリー（&date=2007-1-1）にしたいのですがどう書けばいいのでしょうか… <!--ここから--> 配送日： <SELECT NAME="date_year"> <OPTION value="2007">2007 <OPTION value="2008">2008 <OPTION value="2009">2009 </SELECT>年 <SELECT NAME="date_month"> <OPTION value="1">1 ～省略～ <OPTION value="12">12 </SELECT>月 <SELECT NAME="date_day"> <OPTION value="1">1 ～省略～ <OPTION value="31">31 </SELECT>日 <!--ここまで--> また、selectメニューの初期値を ページを表示した日の翌日にしたいのです。 どうぞよろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは CGIを使ってやるならこんな感じ・・・(test.cgiの中身になります) print "<body>\n"; $year=$in{'nen'}; $month=$in{'gatu'}; $day=$in{'niti'}; print <<"EOM"; <script language=javascript><!-- window.onload=function(){ days = new Array("","31","28","31","30","31","30","31","31","30","31","30","31"); now = new Date(); yea = now.getFullYear(); mon = now.getMonth()+1; day = now.getDate()+1; day0 = days[mon]; if((yea%4) == 0 && (yea%100) != 0 || (yea%400) == 0) {if(mon ==2){ day0=29;}} obj1 = document.today.nen; obj2 = document.today.gatu; obj3 = document.today.niti; if(day > day0){ if(mon==12){ yea=yea+1; } mon=mon+1; day=1; day0 = days[mon]; } year="$year"; for(i=0; i<3; i++) { m = yea+i; obj1.options[i] = new Option(m,m); if(m == yea && year==""){ obj1.options[i].selected =true; } else{ if(obj1.options[i].value==year){ obj1.options[i].selected =true; } } } month="$month"; for(i=0; i<12; i++) { n = i+1; if(n<10){n="0"+n;} obj2.options[i] = new Option(n,n); if(n == mon && month==""){ obj2.options[i].selected =true; } else{ if(obj2.options[i].value==month){ obj2.options[i].selected =true; } } } date="$day"; for(i=0; i<day0; i++) { l = i+1; if(l<10){l="0"+l;} obj3.options[i] = new Option(l,l); if(l == day && date==""){ obj3.options[i].selected =true; } else{ if(obj3.options[i].value==date){ obj3.options[i].selected =true; } } } document.getElementById('date').value=obj1.value + "-" + obj2.value + "-" +obj3.value; } function change(){ obj1 = document.today.nen; obj2 = document.today.gatu; obj3 = document.today.niti; document.getElementById('date').value=obj1.value + "-" + obj2.value + "-" + obj3.value; } function change0(){ obj1 = document.today.nen; obj2 = document.today.gatu; obj3 = document.today.niti; document.getElementById('date').value=obj1.value + "-" + obj2.value + "-" + obj3.value; for(i=0; i<31; i++) { l = i+1; if(l<10){l="0"+l;} obj3.options[i] = new Option(l,l); } } //--> </script> <form name="today" action="test.cgi" method="post"> <select name="nen" onChange="change()"></select>年 <select name="gatu" onChange="change0()"></select>月 <select name="niti" onChange="change()"></select>日 <input type="text" name="date" size="12"> <input type="submit" value="送信"> </form> </body> EOM
その他の回答 (2)
- is_may
- ベストアンサー率65% (58/89)
とりあえず月・日を2桁にそろえるようにしました（下記）。 次の画面で送信内容を初期選択にする場合には、Perlで<select>タグの部分を動的に作成し、ユーザーが選択した項目を<option selected></option>にするようにしてもいいです。 それか次のページに下記のJavaScriptを挿入し、選択した年は変数$nyearに、月は$nmonに、日は$ndayに代入すればJavaScriptが、送信した値を選択します。 前者の方法を使う場合は「Perl部分」間を削除してください。参考までに。 <script language="javascript"><!-- d=document; myDate= new Date(); we= new Array(31,28,31,30,31,30,31,31,30,31,30,31); year=myDate.getYear(); mon=myDate.getMonth()+1; day=myDate.getDate(); year=(year<2000)?(1900+year):(year); if (((year%4)==0 && (year%100)!=0) || (year%400)==0); we[1] = 29; if(mon==12 && day==we[mon-1]){//大晦日 year++; mon=1; day=1; } else if(day==we[mon-1]){//12月を除く、月の最後の日 mon++; day=1; } else {//月の最後の日以外 day++; } function xFirstRun(){ //Perl部分 year=$nyear; mon=$nmon; day=$nday; //Perl部分 for(i=0;i<d.f.date_year.length;i++){ if(d.f.date_year.options[i].value==year){ d.f.date_year.options[i].selected=true; } } for(i=0;i<d.f.date_month.length;i++){ if(d.f.date_month.options[i].value==mon){ d.f.date_month.options[i].selected=true; } } for(i=0;i<d.f.date_day.length;i++){ if(d.f.date_day.options[i].value==day){ d.f.date_day.options[i].selected=true; } } d.f.date.value=year+"-"+x2Place(mon)+"-"+x2Place(day); } function xChange(){ ye=d.f.date_year.options[d.f.date_year.selectedIndex].value; mo=d.f.date_month.options[d.f.date_month.selectedIndex].value; da=d.f.date_day.options[d.f.date_day.selectedIndex].value; d.f.date.value=ye+"-"+x2Place(mo)+"-"+x2Place(da); } function x2Place(nm){ return ((nm<10)?("0"+nm):nm); } onload=xFirstRun; --> </script>
- is_may
- ベストアンサー率65% (58/89)
JavaScriptで再現できます。 <script language="javascript"><!-- d=document; myDate= new Date(); we= new Array(31,28,31,30,31,30,31,31,30,31,30,31); year=myDate.getYear(); mon=myDate.getMonth()+1; day=myDate.getDate(); year=(year<2000)?(1900+year):(year); if (((year%4)==0 && (year%100)!=0) || (year%400)==0) we[1] = 29; if(mon==12 && day==we[mon-1]){//大晦日 year++; mon=1; day=1; } else if(day==we[mon-1]){//12月を除く、月の最後の日 mon++; day=1; } else {//月の最後の日以外 day++; } function xFirstRun(){ for(i=0;i<d.f.date_year.length;i++){ if(d.f.date_year.options[i].value==year){ d.f.date_year.options[i].selected=true; } } for(i=0;i<d.f.date_month.length;i++){ if(d.f.date_month.options[i].value==mon){ d.f.date_month.options[i].selected=true; } } for(i=0;i<d.f.date_day.length;i++){ if(d.f.date_day.options[i].value==day){ d.f.date_day.options[i].selected=true; } } d.f.date.value=year+"-"+mon+"-"+day; } function xChange(){ ye=d.f.date_year.options[d.f.date_year.selectedIndex].value; mo=d.f.date_month.options[d.f.date_month.selectedIndex].value; da=d.f.date_day.options[d.f.date_day.selectedIndex].value; d.f.date.value=ye+"-"+mo+"-"+da; } onload=xFirstRun; --> </script> <form name="f"><select name="date_year" onchange="xChange()"> <option value="2006">2006 </option> <option value="2007">2007 </option> <option value="2008">2008 </option> <option value="2009">2009 </option> </select>年 <select name="date_month" onchange="xChange()"> <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="date_day" onchange="xChange()"> <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>日<br> <br> <input type="text" name="date"></form>
お礼
早速のお返事ありがとうございます。 あと月と日付が一桁のとき2007-5-9ではなく 2007-05-09にする方法と、 selectメニューの初期値（翌日の日付）は、 はじめに表示したときだけで、 次に表示したときはクエリーで送信した内容を反映したいのですが、 この辺はクエリーをPerl内で分解しないと難しいでしょうか。 ちょっと自分でも訳がわからなくなってきました… こちらのjavaScriptは大変助かりました。 ありがとうございました。
お礼
ありがとうございます！ 早速試してみたいと思います！