JavaScriptでselect要素のoption(項目)をセレクトする

JavaScriptでselect要素の、ある項目を選択状態にしたかった時に、ちょっとハマったのでメモ。

似たような処理で、JavaScriptでselect要素のデフォルトの項目を設定する方法がありますが、それと混同してしまったので、整理してみました。

はじめに

例えば、以下のようなセレクトボックスがあったとします。

JavaScriptで、ある項目をデフォルトの選択にしたい場合と、単純に選択状態にしたいだけの場合と、意味合いが若干変わってきます。

ある項目をデフォルトに設定する場合

例えば、option要素の「21」をデフォルトの項目として設定したい場合。

何番目で指定する

1番目を0から数えるので、「21」は4番目なので、「3」を指定します。

値で指定する

結果

以下のように、selected="selected"が挿入され、自動的にセレクトされた状態にもなりますが、前後で別のセレクト処理などをしていると、この処理ではセレクトされた状態にならない場合があります。

ある項目を選択状態にする場合

例えば、option要素の「21」を選択された状態にしたい場合。

何番目で指定する

1番目を0から数えるので、「21」は4番目なので、「3」を指定します。

値で指定する

結果

以下のように、selected="selected"は挿入されず、ブラウザ上では「21」が選択された状態になります。

まとめ

JavaScriptでフォームの内容をいろいろいじりたい時は、上記の2つの違いを理解していないと、思い通りの挙動にならない場合があるので、注意したいですね。

「selected」を挿入したい場合は、

ただ選択させたいだけの場合は、

ということになります。