説明

選択フォームを使って時刻を選択する場合、１分単位で表示されていると選択項目が多くなって面倒なときもあります。 ５分単位で選択すれば良いときは、項目も５分単位であれば選択が楽ですよね。

実行例

00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 10 21 22 23 時　 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 10 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 40 51 52 53 54 55 56 57 58 59 分　　▼ラジオボタンのチェック項目を変えてコンボボックスを見てください

1分　 5分　 10分　 15分　 30分

コード

function setMinute(obj, interval, curpoint, maxcount, seltext) {
	interval = getInterval(obj.form.interval);
	obj = obj.form.minute;
	curpoint = (60 / obj.length) * obj.selectedIndex;
	maxcount = 60 / interval;
	obj.length = maxcount;
	for (cnt = 0; cnt < maxcount; cnt++) {
		seltext = cnt * interval
		obj.options[cnt].value = seltext;
		if (cnt * interval < 10) {
			obj.options[cnt].text = "0" + seltext;
		} else {
			obj.options[cnt].text = seltext;
		}
	}
	obj.selectedIndex = Math.floor(curpoint / interval);
}

function getInterval(obj) {
	for (cnt = 0; cnt < obj.length; cnt++) {
		if (obj[cnt].checked) {
			return(parseInt(obj[cnt].value));
		}
	}
}

<FORM>
<SELECT name="hour">
<OPTION value="0">00</OPTION>〜<OPTION value="23">23</OPTION>
</SELECT>時　
<SELECT name="minute">
<OPTION value="0">00</OPTION>〜<OPTION value="59">59</OPTION>
</SELECT>分
<INPUT type="radio" name="interval" value="1"  onClick="setMinute(this)" checked> 1分　
<INPUT type="radio" name="interval" value="5"  onClick="setMinute(this)"> 5分　
<INPUT type="radio" name="interval" value="10" onClick="setMinute(this)"> 10分　
<INPUT type="radio" name="interval" value="15" onClick="setMinute(this)"> 15分　
<INPUT type="radio" name="interval" value="30" onClick="setMinute(this)"> 30分
</FORM>

解説＆ステップアップ

発想がメインの処理なので、スクリプト自体は難しいものではありません。
実行例では、ラジオボタンを変更する前の選択フォームの選択項目の値を変更後の選択フォームに反映しています。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)