セレクトボックスの連動処理について

解決済

質問者：yuko8320
質問日時：2009/08/28 18:46
回答数：3件

お世話になります。

先日もココで質問させていただいたのですが、
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時
を表示。

------------------------------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： babu_baboo
回答日時：2009/09/02 07:45

さらにみじかく

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

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2009/08/28 21:26

う～～ん。

まな～が・・・。
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を実行できますか？」が、とっぷで
くいこんでくるのはなぜ？とおもうのは、ばぶぅ～だけ？
ということを、かいとうするたびに、つけている。^^;
というか、さいきん、これをかきたいがために、かいとうしている？

- 0
- 件

通報する

No.1

回答者： yukoyuko83
回答日時：2009/08/28 18:56

質問者の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>
<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>


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