【JavaScript】セレクトボックスで選択中の項目を変更する方法

HTMLには、プルダウンメニューの中から項目を選択できるセレクトボックスがありますが、今回は、そのセレクトボックスで選択中の項目を、JavaScriptを利用して変更する方法となります。

【JavaScript】セレクトボックスで選択中の項目を変更する例

以下の例では、idの値にselect_boxをもつselect要素に対して、選択中の項目を、上から3番目の項目に変更しています。

document.addEventListener('DOMContentLoaded', function(){
	var select = document.getElementById('select_box');
	var options = select.options ;
	options[2].selected = true;
}, false);

上記コードでは、取得したselect要素に対してoptionsプロパティを指定することで、セレクトボックス内のoption要素を順番にHTMLOptionsCollectionとして取得しています。

そして、HTMLOptionsCollectionの中から、指定したoption要素に対して、selectedプロパティの値を trueにすることにより、セレクトボックスで選択中の項目を変更しています。