- ベストアンサー
当日から3日後がデフォルトの連動年月日プルダウンを作成する方法
- 当日から3日後がデフォルトの連動年月日プルダウンを作成したいと思っています。PHPかJavaScriptを使用する予定で、1つ目のプルダウンには当日から3日後～1か月程度の選択肢を、2つ目のプルダウンには1つ目のプルダウンで選択された日付の1日後～1か月程度の選択肢を表示させたいです。
- 連動プルダウンのサンプルコードは手に入ったのですが、日付のプルダウンにする方法がわかりません。どなたかサンプルコードなどを教えていただけないでしょうか。
- ご教示いただけると幸いです。よろしくお願いいたします。
- ifp_u
- お礼率25% (2/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
サンプルが何か分からないので無いものとして回答を IEだとバグるのでappendChildなどでoptionを挿入する事 <script type="text/javascript"> /**********[global]**********/ var nowYear; var nowMonth; var nowDate; var nowLimitDay; var nowTag1; var nextTag1; var selectMonth; /**********[global]**********/ function onReady(){ var nowDate = new Date(); wkYear = nowDate.getYear(); //年 nowYear = (wkYear < 2000) ? wkYear+1900 : wkYear ; //月 nowMonth = nowDate.getMonth()+1; //日 nowDate = nowDate.getDate(); //今月の日数 nowLimitDay = new Date(nowYear, nowMonth, 0).getDate(); //日付用オプションタグ nowTag1 = ""; nextTag1 = ""; //選択中の月 selectMonth = 0; //プルダウン1日付、デフォ+3 pull1D = nowDate + 3; //次の月のどこまで日付を選べるか fitThirty = 30 - (nowLimitDay - pull1D) //月のオプション monthTag = '<option value=' + nowMonth + '>' + nowMonth + '月</option>'; if(nowMonth != 12){ monthTag += '<option value=' + (nowMonth+1) + '>' + (nowMonth+1) + '月</option>'; } //今月の日付オプション for(i=pull1D;i <= nowLimitDay;i++){ nowTag1 += '<option value="' + i + '">' + i + '日</option>'; } //来月の日付オプション for(i=1;i <= fitThirty;i++){ nextTag1 += '<option value="' + i + '">' + i + '日</option>'; } document.getElementById("year1").innerHTML = nowYear + "年"; document.getElementById("year2").innerHTML = nowYear + "年"; document.getElementById("pull1M").innerHTML = monthTag; document.getElementById("pull2M").innerHTML = monthTag; document.getElementById("pull1D").innerHTML = nowTag1; document.getElementById("pull2D").innerHTML = nowTag1; } function changeDay(){ selectObj = document.getElementById("pull1D"); options = document.getElementById("pull1D").options; selectDay = options.item(selectObj.selectedIndex).value; selectDay++;selectDay--; setTag = ""; if(selectMonth == 0){ setTag = nowTag1; }else{ setTag = nextTag1; } wkPos = setTag.indexOf('<option value="' + (selectDay+1) + '">' + (selectDay+1) + '日</option>', 0); chageDayTag = '<option value="' + selectDay + '" selected>' + selectDay + '日</option>' + setTag.substr(wkPos); document.getElementById("pull2D").innerHTML = chageDayTag; } function changeMonth1(){ setTag = ""; if(selectMonth == 0){ setTag = nextTag1; changeMonth(nowMonth+1); selectMonth = 1; }else{ setTag = nowTag1; changeMonth(nowMonth); selectMonth = 0; } document.getElementById("pull1D").innerHTML = setTag; document.getElementById("pull2D").innerHTML = setTag; } function changeMonth2(){ if(selectMonth == 0){ selectObj = document.getElementById("pull2D"); options = document.getElementById("pull2D").options; selMonth2 = options.item(selectObj.selectedIndex).value; if(nowMonth == selMonth2){ document.getElementById("pull2D").innerHTML = nextTag1; }else{ document.getElementById("pull2D").innerHTML = nowTag1; } }else{ changeMonth(nowMonth+1); } } function changeMonth(selMonth){ optObj = document.getElementById("pull2M").getElementsByTagName('option'); for(i=0; i<optObj.length;i++){ if(optObj[i].value == selMonth){ optObj[i].selected = true; break; } } } </script> <style> </style> </head> <body onload="onReady()"> <div id="box"> <div id="year1"></div> / <select id="pull1M" onchange="changeMonth1()"></select> / <select id="pull1D" onchange="changeDay()"></select> <div id="year2"></div> / <select id="pull2M" onchange="changeMonth2()"></select> / <select id="pull2D"></select> </div> </body>
その他の回答 (1)
- CyberCypher
- ベストアンサー率73% (39/53)
サンプルコードが分からないので サンプルコードの改造指針を示す事が出来ません １から組んで提示してと言う事でしょうか？
お礼
すみません！ スクリプトだけを送信してしまいました…。 ご覧のとおり、サンプルは電車の発着のものなので、日付とは程遠いんです…。 なので、どこを改変したらいいのかも分からなくて、1行でも変えるとエラーが出てしまって…
補足
<form action="#"> 出発駅 <select name="jr_st" onchange="dblCheck(this)"> <option value="" selected="selected">▼ 選択 ▼ </option> <option value="sinjyuku">新宿</option> <option value="yoyogi">代々木</option> <option value="harajyuku">原宿</option> <option value="sibuya">渋谷</option> <option value="ebisu">恵比寿</option> <option value="meguro">目黒</option> <option value="gotanda">五反田</option> </select> 到着駅 <select name="jr_ed" onchange="dblCheck(this)"> <option value="" selected="selected">▼ 選択 ▼ </option> <option value="sinjyuku">新宿</option> <option value="yoyogi">代々木</option> <option value="harajyuku">原宿</option> <option value="sibuya">渋谷</option> <option value="ebisu">恵比寿</option> <option value="meguro">目黒</option> <option value="gotanda">五反田</option> </select> </form> <script type="text/javascript"> /** * [関数名] dblCheck * [機 能] 重複選択チェック * [説 明] 2つのプルダウン（出発駅と到着駅）で同じ駅名を選択したらアラート表示 * [引 数] * @param sel セレクトオブジェクト */ function dblCheck(sObj){ /* 重複カウンター */ var dbl=0; /* 出発駅の選択されたインデックス番号 */ var st =sObj.form.elements['jr_st'].selectedIndex; /* 到着駅の選択されたインデックス番号 */ var ed=sObj.form.elements['jr_ed'].selectedIndex; if(st!="" && ed!=""){ /* 同じ駅名を選択している場合はカウントアップ */ if(st==ed) dbl++; } if(dbl>0){ /* 同じ駅名が選択されている場合はアラート表示 */ alert("出発駅と到着駅が重複しています"); /* プルダウンクリア */ sObj.selectedIndex=0; } } </script>
お礼
出来ました！ 本当にありがとうございました！