[Javascript] selectタグのvalue値からindex番号を取得する方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページでのselectフォームは便利なのでついつい使ってしまいますが、javascriptでも便利な機能は揃っているんですが、value値からそのindex番号を取得するという事が意外に機能化されていない事に気が付き、どうすれば簡易に取得することができるかを考えてみたいと思います。
 

そもそも、どういった時にこの手法が必要になるのかと言うと、
システム連携をする場合や、すでに保存されているデータを読み込んで値反映をする場合などselectエレメントのvalue値を切り替えれば簡単に取得できますが、value値を切り替えること無くoptionタグの情報にアタッチするのがデフォルト機能でリファレンスサイトなどを調べてもどうしても見つけることができなかったので、
 

今後の作業のために、スニペット化しておきたいと思います。

selectタグ(エレメント)の情報取得あれこれ

javascriptを使ってselectタグやそれに内包するoptionタグの情報を取得する際には、他の入力フォームよりも多い機能が備わっています。
 

 

上記の構成を使って、色々な値を取得してみたいと思います。
 

value値を元にoptionタグを取得する方法

optionタグにdata属性などで値を埋め込んでおいて、簡易なデータベースを構築することも可能ですが、その際には、selectタグ内のoptionタグを一旦全てナメる必要がありそうなので、簡易ですが以下のようなプログラムを作ってみました。
 

 

非常に簡単な関数ですが、使用する為の注意点がいくつかあります。
 

まず、このgetOptionElement関数は、存在しないselectタグやエレメントではない値をselect_tagとして送り値に入れてしまうとエラーになってしまいます。
 

あと、値も全て数値ではなく、文字列で指定する必要があります。(これは、HTML記述されたタグ属性が全てstringになる為ですが、jsでvalue値登録した場合は、数値でも可能です。)
 

そして最も重要なのが、optionタグのvalue値がユニーク構造になっておらず、同じvalue値が複数存在する場合は、最初のoptionタグが返されます。
 

複数のoptionタグをデフォルトにして、配列でエレメントを返すバージョンも作ってみたので、比べてみてください。
 

 

返ってきた値が配列として返ってくるので、lengthで調査して内包する数を確認するといいのですが、ひと手間増えてしまうので、nullを返すという手もありますね。
 

とりあえず、selectタグのoptionデータをvalue値や他の属性を元に、もっと簡易に取得できる方法があれば、今の所最も手っ取り早いのは以下の方法かもしれません。
 

 

ここにきてやはりquerySelectorの使い勝手の良さが理解できますね。
 

お好みに合ったコードをお使いください。

関連記事

[javascript] selectタグのvalue値ではなく、ラベルの値を取得したい場合
 

[Javascript] SELECTタグの追加と削除と変更のスマートなコーディング
 

jQueryを使わない方法「Select要素に値を追加する」
 

[Javascript] serectタグは使いづらい、選択も入力もできるフォーム構築ができる「pulldown.js」
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です