Jquery SELECTを選択する方法

2022年1月25日

Jqueryでフォームを操作することはよくあります。
例えばラジオボタンやチェックボックスの操作などです。

今回同様に「セレクトフォーム」をJqueryで操作する必要がありました。
その際にふと疑問に思いました。

セレクトフォームって、Jqueryでどうやって選択するの？と

今回も多分に漏れず、ググって調べて対処できましたので忘備録として記録いたします。

セレクトフォームはprop()関数で操作できない

ラジオボタンやチェックボックスは、Jqueryのprop()関数で操作できます。
セレクトフォームも似たようなものだと思い、prop()でやろうとしたら、動きませんでした。

よくよく考えるとラジオボタンもチェックボックスも、選択肢が個々のフォームとして独立していますが、セレクトフォームの選択肢は複数で1つのフォームです。

prop()は複数フォームから一つを選択し、パラメータを変更する関数です。
初めから一つのフォームでは動作しないのもうなずけます。

ということで、ググって調べてみました。

セレクトフォームはval()関数で操作できます。

Jqueryのval()関数は、inputフォームのvalue項目に値を設定する関数です。
この関数を使えば、セレクトフォームの値を選択できます。

論より証拠として、こちらのサンプルをご覧ください。
Jqueryでセレクト選択ができています。

val()関数って、セレクトでもつかえるの？
と最初疑問に感じましたが、セレクトフォームの記述を見ると納得できました。

セレクトフォームにも「value」が使われていました。
だから、val()関数で選択できるのです。

具体的なval()関数の記述方法

では、具体的にはどう記述すればよいのでしょうか?
上記「sampleセレクト」の記述を例に以下に記載します。

■松・竹・梅の「松」を選択する記述

セレクトフォームを指定し、val([value値])を指定すれば選択できます。
意外と簡単にJqueryで選択できました。

でも、ここで疑問がわきました。

疑問：セレクトフォームを複数選択する場合はどうすればいいの？

セレクトフォームはチェックボックスのように複数指定が可能なやり方もあります。
例えば上記のサンプル例だと、以下のように記述したフォームです。

「multiple」指定をつけると、複数選択できるセレクトになります。
この複数選択セレクトをJqueryで選択できるのかを調べてみました。

実際にできたものがこちら

Jqueryで複数選択するサンプル

先ほどのサンプルに「全選択」を付け加えたバージョンです。
Jqueryでもセレクトフォーム複数選択ができることがわかりました。

具体的には次のように記述しています

val()の中身を[]でくくり、複数の値を指定します。
何気にval()関数で複数指定ができるとは驚きました。

理屈

そもそも[]をつけるとなぜ複数選択になるのか?
C系プログラマの場合、疑問に感じてしまいます。

でもよく考えると、「なるほど。」と感じます。

Javascriptにおいて[]は「配列」を意味します。
[“01″,”02″,”03”]は、PHPで記述すると array(“01”, “02”, “03”)と同じことなのです。

つまり、セレクトに対して配列で値を指定しているにすぎません。
たったそれだけのことでした。

こうやって見てみると、Jqueryとはうまくできているものだと実感します。