ガレコレ [Garage Collection]
2017年9月26日(火)
<select>の値を指定する #HTML5&CSS3&JavaScript
 一昔前だったら<select>の値を指定する場合は、document.forms[0].elements[0].options[n].selected=true;ぐらいしかありませんでした。

 今では、要素、名前、idのいずれでもselectオブジェクトを指定できて、options[n]=trueだけではなく、selectedIndex、valueで値を指定できます。


-- HTML部分 --

<form>
<select name="month" id="id_month">
<option value="1">1</option>
<option value="2" selected>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>
</form>
--

-- 全部 5月 --

【要素指定】
document.forms[0].elements[0].options[4].selected=true;
document.forms[0].elements[0].selectedIndex=4;
document.forms[0].elements[0].value=5;

【name指定】
document.date.month.options[4].selected=true;
document.date.month.selectedIndex=4;
document.date.month.value=5;

【id指定】document.getElementById('id_month').options[4].selected=true;
document.getElementById('id_month').selectedIndex=4;
document.getElementById('id_month').value=5;
--
http://neconote.jp/prg/select.html
 
お問い合わせ


by Network Communication Note