引数でDOMのエレメントを指定したいのですが。

質問

javascriptが苦手な者で質問内容にさえ自身が無い質問です。

スケジュールを管理するフォームを作りたく、以下のようなものを書いてトライしています。

-----------------------------------
javascript部
-----------------------------------
function clear_select(day){
　　elem = "select_hour_" + day;
　　document.form_name.elem.selectedIndex = "--";
}

-----------------------------------
htmlのform部
-----------------------------------
<input id="Bot_Sch_20111001" name="Bot_Sch_20111001" type="button" onClick="clear_select('20111001')" >
<select id="select_hour_20111001" name="select_hour_20111001">
<option value="--">--</option>
<option value="01">1</option>
<option value="02">2</option>
↓
<option value="24">24</option>
</select>

<input id="Bot_Sch_20111002" name="Bot_Sch_20111002" type="button" onClick="clear_select('20111002')" >
<select id="select_hour_20111002" name="select_hour_20111002">
<option value="--">--</option>
<option value="01">1</option>
<option value="02">2</option>
↓
<option value="24">24</option>
</select>

以下30日程セレクターが続きます。
-----------------------------------

上記関数clear_selectの引数でフォームのエレメントを規定し、そのセレクターの値を書き換える事はできるのでしょうか？
可能ならどのような書き方をすべきなのかご教授いただけるとありがたいです。

回答No.1

yambejp · ベストアンサー

ポイントは
・formの要素はelements[要素のname]でつかめます
・selectedIndexは0から始まる数値でしめします

今回のケースだと同じような構造がつづくなら、
イベントをアタッチした方が汎用性がたかいでしょうね
たとえばこんな感じ

<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //基本
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.name && t.name.match("^Bot_Sch_")){
clear_select(t)
}
}

function clear_select(obj){
var num=obj.name.match(/[0-9]+/)[0];
obj.form.elements["select_hour_"+num].selectedIndex = 0;
}
</script>
<form>
<input id="Bot_Sch_20111001" name="Bot_Sch_20111001" type="button">
<select id="select_hour_20111001" name="select_hour_20111001">
<option value="--">--</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="24">24</option>
</select>
<input id="Bot_Sch_20111002" name="Bot_Sch_20111002" type="button">
<select id="select_hour_20111002" name="select_hour_20111002">
<option value="--">--</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="24">24</option>
</select>
</form>

お礼

大変参考になりました。実装も完了しました。ありがとう！