- 締切済み
セレクトボックスの連動処理について
お世話になります。 先日もココで質問させていただいたのですが、 JS初心者の癖に知人に頼まれJSでの処理に手を出し困っています。。。 以下のソースの様なフォームを作成しておりまして、（質問用にCSSを抜いた簡易なソースにしました。） 以下のようにやりたいことが定まっているのですが、 これをJSで書くにはどうして良いのやら。。。わからないのです・・・。 まだまだJSではしたいことを実現するだけの力がなく、 どなたかヒントだけでもいただけないでしょうか・・・？ あわよくば、サンプルコードなんていただけると、なお助かります。。 投稿文章が長くなってしまったため、 ２回に分けて投稿します。 それでは、よろしくお願い致します。 ---- やりたいこと ------------------------------------------------ hope_collect_dayの値が今日の日付と同じで、AM11:00以前であれば hope_collect_timeの選択肢として、 13～15時 15～17時 17～21時 を表示。 hope_collect_dayの値が今日の日付と同じで、PM13:00以前であれば hope_collect_timeの選択肢として、 15～17時 17～21時 を表示。 hope_collect_dayの値が今日の日付と同じで、PM15:00以前であれば hope_collect_timeの選択肢として、 17～21時 を表示。 hope_collect_dayの値が今日の日付と同じでなかったら、 hope_collect_timeの選択肢として、 ～13時 13～15時 15～17時 17～21時 を表示。 ------------------------------------------------------------------
- yuko8320
- お礼率24% (8/33)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
さらにみじかく <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <body> <form name ="frm1" method="post" action="aaa.php" accept-charset="UTF-8"> <fieldset> <legend>ご希望日時</legend> <select name="hope_collect_day" onchange="init(this.value)"> <option value="" selcted="selected">日付を選んで下さい</option> <option value="0">本日</option> <option value="1">１日後</option> <option value="2">２日後</option> </select> <select name="hope_collect_time"> <option value="" selcted="selected">時間帯を選んで下さい</option> <option value="1">～13時</option> <option value="2">13時～15時</option> <option value="3">15時～17時</option> <option value="4">17時～19時</option> </select> </fieldset> <fieldset> <legend>お渡しご希望日時</legend> <select name="hope_pass_day"> <option value="" selcted="selected">日付を選んで下さい</option> <option value="3">３日後</option> <option value="4">４日後</option> <option value="5">５日後</option> </select> <select name="hope_pass_time"> <option value="" selcted="selected">時間帯を選んで下さい</option> <option value="1">9時～12時</option> <option value="2">12時～14時</option> <option value="3">14時～16時</option> <option value="4">16時～18時</option> <option value="5">18時～20時</option> <option value="6">20時～21時</option> </select> </fieldset> </form> <script type="text/javascript"> function init(v) { var o={}, i=0, n=new Date, h=n.getHours(); v-=0; if(!v){ while (o[i] = n.hizuke(i), ++i < 14); setSelect('hope_collect_day', o)} o = {}, i = 3; while (o[i] = n.hizuke(i + v), ++i < 17); setSelect('hope_pass_day', o); o = {'':'時間帯を選んで下さい', 1:'～13時', 2:'13時～15時', 3:'15時～17時', 4:'17時～19時'}; setSelect('hope_collect_time', o, 0, 0, !v * ( (h<11) * 2 + (h<13) +(h<15))); } Date.prototype.hizuke = function(n){ var c=new Date(this); n&&c.setHours(n*24); return c.getFullYear()+'/'+z(c.getMonth()+1)+'/'+z(c.getDate()); function z(s){return s<10?'0'+s:s} } function setSelect(n,objs,def,sel,op) { var e = document.getElementsByName(n)[0] || document.getElementById(n), i, o = e.options, c = op || 0; o.length = 0; for (i in objs) --c<0 && (o[o.length] = new Option(objs[i], i, def == i, sel == i)); } init(0); </script>
- babu_baboo
- ベストアンサー率51% (268/525)
う～～ん。まな～が・・・。 phpをつかうりゆうが、わからないので、すくりぷとだけで、かいたじょ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <body> <form name ="frm1" method="post" action="aaa.php" accept-charset="UTF-8"> <fieldset> <legend>ご希望日時</legend> <select name="hope_collect_day" onchange="init1(this)"> <option value="" selcted="selected">日付を選んで下さい</option> <option value="0">本日</option> <option value="1">１日後</option> <option value="2">２日後</option> </select> <select name="hope_collect_time"> <option value="" selcted="selected">時間帯を選んで下さい</option> <option value="1">～13時</option> <option value="2">13時～15時</option> <option value="3">15時～17時</option> <option value="4">17時～19時</option> </select> </fieldset> <fieldset> <legend>お渡しご希望日時</legend> <select name="hope_pass_day"> <option value="" selcted="selected">日付を選んで下さい</option> <option value="3">３日後</option> <option value="4">４日後</option> <option value="5">５日後</option> </select> <select name="hope_pass_time"> <option value="" selcted="selected">時間帯を選んで下さい</option> <option value="1">9時～12時</option> <option value="2">12時～14時</option> <option value="3">14時～16時</option> <option value="4">16時～18時</option> <option value="5">18時～20時</option> <option value="6">20時～21時</option> </select> </fieldset> </form> <script type="text/javascript"> function init () { var val = [], day = [], now = new Date, cnt; for (cnt = 0; cnt < 14; cnt ++) { val.push(cnt); day.push(now.hizuke(cnt)); } setSelect('hope_collect_day', day, val, 0, 0); init1(); } function init1 () { var val = [], day = [], now = new Date, cnt, h = now.getHours(), s = 0; var n = document.getElementsByName('hope_collect_day')[0].value - 0; for (cnt = 3; cnt < 17; cnt ++) { val.push(cnt + n); day.push(now.hizuke(cnt + n)); } setSelect('hope_pass_day', day, val, 1, 1); val = ['',1,2,3,4]; tim = ['時間帯を選んで下さい','～13時','13時～15時','15時～17時','17時～19時']; if (document.getElementsByName('hope_collect_day')[0].value == '0') { if (h < 11) s = 2; else if (h<13) s = 3; else if (h<15) s = 4; } setSelect('hope_collect_time', tim, val, 1, 1, s); } Number.prototype.zero = function(n){ return ('00000000000000'+ this).slice(-n); } Date.prototype.hizuke = function(n){ var c = new Date(this); if (undefined != n) c.setHours(n * 24); return c.getFullYear().zero(4)+'/'+(c.getMonth()+1).zero(2)+'/'+c.getDate().zero(2); } function setSelect (n, texts, values, default_v, selected_v, op) { var e = document.getElementsByName(n)[0] || document.getElementById(n), i, t, v; if (e) { e.options.length = 0; for (i = op || 0; i < texts.length; i++) { t = texts[i]; v = values[i]; e.options[e.options.length] = new Option(t, v, default_v == v, selected_v == v); } } } init(); </script> これとは、まったくちがうことなのだけど。 教えてgooで、みると、「このカテゴリで人気のQ&A」のいちらんに 「１つのformで複数のactionを実行できますか？」が、とっぷで くいこんでくるのはなぜ？とおもうのは、ばぶぅ～だけ？ ということを、かいとうするたびに、つけている。^^; というか、さいきん、これをかきたいがために、かいとうしている？
- yukoyuko83
- ベストアンサー率0% (0/0)
質問者のyuko8320です。 以下、質問の続きになります。 ---- ここからソース ---------------------------------------------- <?php //時間帯セット $hope_time_set = array( "0"=>"▲時間帯を選んで下さい", "1"=>"9時～13時", "2"=>"13時～15時", "3"=>"15時～17時", "4"=>"17時～19時" ); //時間帯セット $pass_time_set = array( "0"=>"▲時間帯を選んで下さい", "1"=>"9時～12時", "2"=>"12時～14時", "3"=>"14時～16時", "4"=>"16時～18時", "5"=>"18時～20時", "6"=>"20時～21時" ); //日付セット for($a = 0; $a < 14; $a++) { $timestamp[] = strtotime("+$a day"); } $collect_day_set = array( "0"=>"▲日付を選んで下さい", "1"=>date( 'Y/m/d', $timestamp[0] ) , "2"=>date( 'Y/m/d', $timestamp[1] ) , "3"=>date( 'Y/m/d', $timestamp[2] ) , "4"=>date( 'Y/m/d', $timestamp[3] ) , "5"=>date( 'Y/m/d', $timestamp[4] ) , "6"=>date( 'Y/m/d', $timestamp[5] ) , "7"=>date( 'Y/m/d', $timestamp[6] ) , "8"=>date( 'Y/m/d', $timestamp[7] ) , "9"=>date( 'Y/m/d', $timestamp[8] ) , "10"=>date( 'Y/m/d', $timestamp[9] ) , "11"=>date( 'Y/m/d', $timestamp[10] ) , "12"=>date( 'Y/m/d', $timestamp[11] ) , "13"=>date( 'Y/m/d', $timestamp[12] ) , "14"=>date( 'Y/m/d', $timestamp[13] ) ); //お渡し日付セット for($a = 3; $a < 17; $a++) { $timestamp2[] = strtotime("+$a day"); } $pass_day_set = array( "0"=>"▲日付を選んで下さい", "1"=>date( 'Y/m/d', $timestamp2[0] ) , "2"=>date( 'Y/m/d', $timestamp2[1] ) , "3"=>date( 'Y/m/d', $timestamp2[2] ) , "4"=>date( 'Y/m/d', $timestamp2[3] ) , "5"=>date( 'Y/m/d', $timestamp2[4] ) , "6"=>date( 'Y/m/d', $timestamp2[5] ) , "7"=>date( 'Y/m/d', $timestamp2[6] ) , "8"=>date( 'Y/m/d', $timestamp2[7] ) , "9"=>date( 'Y/m/d', $timestamp2[8] ) , "10"=>date( 'Y/m/d', $timestamp2[9] ) , "11"=>date( 'Y/m/d', $timestamp2[10] ) , "12"=>date( 'Y/m/d', $timestamp2[11] ) , "13"=>date( 'Y/m/d', $timestamp2[12] ) , "14"=>date( 'Y/m/d', $timestamp2[13] ) ); ?> <!-- HTMLスタート --> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" language="JavaScript" src="js/jquery.js"></script> <!-- 集荷希望日とお届け希望日のJS連動処理 --> <script type="text/javascript"> window.onload = function(){ set(); } function set() { var elm = document.forms['frm1'].elements['hope_collect_day']; var e = document.forms['frm1'].elements['hope_pass_day']; var i = 0, d, txt, v = elm.value=='▲日付を選んで下さい'?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> <div> <form name ="frm1" method="post" action="aaa.php" accept-charset="UTF-8"> <table> <tr> <td> <dl> <dt>ご希望日時</dt> <dd style="margin-left:150px;"> <p> <select name="hope_collect_day" style="margin-right: 50px" onchange="set();"> <!-- ご希望日の選択肢を吐き出す部分 --> <?php foreach ($collect_day_set as $key => $value): ?> <option value="<?php echo $value; ?>"><?php echo $value; ?></option> <?php endforeach; ?> </select> <select name="hope_collect_time"> <!-- 希望日時の選択肢を吐き出す部分 --> <?php foreach ($hope_time_set as $key => $value): ?> <option value="<?php echo $value; ?>"><?php echo $value; ?></option> <?php endforeach; ?> </select> </p> </dd> </dl> </td> </tr> <tr> <td> <dl> <dt>お渡しご希望日時</dt> <dd style="margin-left:150px;"> <p> <select name="hope_pass_day" style="margin-right:50px; width:150px"> <!-- お渡し希望日の選択肢を吐き出す部分 --> <?php foreach ($pass_day_set as $key => $value): ?> <option value="<?php echo $value; ?>"><?php echo $value; ?></option> <?php endforeach; ?> </select> <select name="hope_pass_time"> <!-- お渡し希望日時の選択肢を吐き出す部分 --> <?php foreach ($pass_time_set as $key => $value): ?> <option value="<?php echo $value; ?>"><?php echo $value; ?></option> <?php endforeach; ?> </select> </p> </dd> </dl> </td> </tr> <tr> <td> </td> </tr> </table> </div> </body> </html> ------------------------------------------------------------------
