javascriptでセレクトボックスの"selected"を動的につ

質問

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日

このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか？

よろしくお願いします。

回答No.3

yambejp · ベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

お礼

具体的なソースまでいただいてありがとうございます。
大変参考になりました。

回答No.2

yamada_g

optionのselectedにtrueを設定すれば選択状態になります。
たとえば、
<script type="text/javascript">
window.onload = function() {
　var today = new Date();
　var year = today.getYear();
　var month = today.getMonth();
　var day = today.getDate();

　selectOption(document.フォーム名.year, year);
　selectOption(document.フォーム名.month, month+1);
　selectOption(document.フォーム名.day, day);
};

function selectOption(obj, value) {
　for (var i = 0, len = obj.length; i < len; i++) {
　　if (obj[i].value == value) {
　　　obj[i].selected = true;
　　　return;
　　}
　}
}
</script>
とか。

お礼

ご回答ありがとうございました。
無事に解決することができました。

回答No.1

yyr446

<script type="text/javascript">
<!--
window.onload = function(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var options=document.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
if(options[i].text==year)
options[i].selected="selected";
if(options[i].text==month)
options[i].selected="selected";
if(options[i].text==day)
options[i].selected="selected";
}
}
// -->
</script>

お礼

ありがとうございました。
無事に解決することができました。