【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;
});

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

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

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。