WEBページでのselectフォームは便利なのでついつい使ってしまいますが、javascriptでも便利な機能は揃っているんですが、value値からそのindex番号を取得するという事が意外に機能化されていない事に気が付き、どうすれば簡易に取得することができるかを考えてみたいと思います。
そもそも、どういった時にこの手法が必要になるのかと言うと、
システム連携をする場合や、すでに保存されているデータを読み込んで値反映をする場合などselectエレメントのvalue値を切り替えれば簡単に取得できますが、value値を切り替えること無くoptionタグの情報にアタッチするのがデフォルト機能でリファレンスサイトなどを調べてもどうしても見つけることができなかったので、
今後の作業のために、スニペット化しておきたいと思います。
selectタグ（エレメント）の情報取得あれこれ
javascriptを使ってselectタグやそれに内包するoptionタグの情報を取得する際には、他の入力フォームよりも多い機能が備わっています。
<select name="sample">
<option value="a">001</option>
<option value="b">002</option>
<option value="c">003</option>
<option value="d">004</option>
<option value="e">005</option>
</select>
上記の構成を使って、色々な値を取得してみたいと思います。
// selectタグ（エレメント）を取得
var select_tag = document.querySelector("select[name='sample']");
// selectタグに内包するoptionタグの数を取得
var option_count = select_tag.length;
var option_count = select_tag.options.length;
// 現在選択されているvalue値を取得
var value_string = select_tag.value;
// 現在選択されているIndex（順番）を取得
var select_number = select_tag.selectedIndex;
// 現在選択されているoptionタグを取得
var option_tag = select_tag.selectedOptions;
// 現在選択されているoptionのラベル(text)値の取得
var label_string = select_tag.options[select_tag.selectedIndex].text
value値を元にoptionタグを取得する方法
optionタグにdata属性などで値を埋め込んでおいて、簡易なデータベースを構築することも可能ですが、その際には、selectタグ内のoptionタグを一旦全てナメる必要がありそうなので、簡易ですが以下のようなプログラムを作ってみました。
var select_tag = document.querySelector("select[name='sample']");
var sample_value = "3";
function getOptionElement(select_tag , value){
for(var i=0; i<select_tag.options.length; i++){
if(select_tag.options[i].value === value){return select_tag.options[i];}
}
return null;
}
var option_tag = getOptionElement(select_tag , sample_value);
非常に簡単な関数ですが、使用する為の注意点がいくつかあります。
まず、このgetOptionElement関数は、存在しないselectタグやエレメントではない値をselect_tagとして送り値に入れてしまうとエラーになってしまいます。
あと、値も全て数値ではなく、文字列で指定する必要があります。（これは、HTML記述されたタグ属性が全てstringになる為ですが、jsでvalue値登録した場合は、数値でも可能です。）
そして最も重要なのが、optionタグのvalue値がユニーク構造になっておらず、同じvalue値が複数存在する場合は、最初のoptionタグが返されます。
複数のoptionタグをデフォルトにして、配列でエレメントを返すバージョンも作ってみたので、比べてみてください。
var select_tag = document.querySelector("select[name='sample']");
var sample_value_array = ["3","4"];
function getOptionElementAll(select_tag , value_array){
var res = [];
for(var i=0; i<select_tag.options.length; i++){
if(value_array.indexOf(select_tag.options[i].value) !==-1){res.push(select_tag.options[i]);}
}
return res;
}
getOptionElementAll(select_tag , sample_value_array);
返ってきた値が配列として返ってくるので、lengthで調査して内包する数を確認するといいのですが、ひと手間増えてしまうので、nullを返すという手もありますね。
とりあえず、selectタグのoptionデータをvalue値や他の属性を元に、もっと簡易に取得できる方法があれば、今の所最も手っ取り早いのは以下の方法かもしれません。
// 単一の返り値
document.querySelector("select[name='sample'] > option[value='3']");
// 複数の返り値
var select_tag = document.querySelector("select[name='sample']");
select_tag.querySelectorAll("option[value='3'],option[value='4']");
ここにきてやはりquerySelectorの使い勝手の良さが理解できますね。
お好みに合ったコードをお使いください。
関連記事
[javascript] selectタグのvalue値ではなく、ラベルの値を取得したい場合
[Javascript] SELECTタグの追加と削除と変更のスマートなコーディング
jQueryを使わない方法「Select要素に値を追加する」
[Javascript] serectタグは使いづらい、選択も入力もできるフォーム構築ができる「pulldown.js」
0 件のコメント:
コメントを投稿