WEBシステムを開発する時に、form項目は頻繁に使用する為、formのたくさんある機能の特性をそれぞれ押さえておかないといけません。
今回はselectタグのvalue値は"element.value"で簡単に取得できますが、その時のラベル値（text値）は簡単に取得できません。
そんな時のスニペットをご紹介します。
ラベル値を使いたいケース
数多くWEBシステムを作ってきた僕もこれまであまり利用したケースは無いのですが、確かにselectのラベル値を取得するというプロパティが存在しません。
そしてあまり困る人がいないことから標準機能に組み込まれていないのだと思いますが、用途は確実にあります。
例えば、selectで一覧が書かれた項目の選択されている項目のみラベル値の変更を行うようなシステムを作った時に、その場でラベル値を取得できると便利なのですが、そうしたプロパティがありそうで無い事に気が付きます。
上記の"C"を"D"に変更したい場合ですね・・・
selectはoptionsにから情報を取得する方がいいの？
select要素は、lengthプロパティで内包するoption要素の数を得ることが出来、その配列を辿っていくと、そのままoption要素にアタッチすることが簡単にできますｌ．
var select = document.getElementsByTagName('select')[0]
# 要素数の取得
select.options.length
> 3
# option要素のアタッチ
select.options[0]
> <option value="a">A</option>
# 選択されている項目のvalue値を取得
select.options[0].value
> a
この手法でほぼほぼ必要な情報が取得できるのですが、selectタグは内容するoption要素への情報を"options"というプロパティで保持しています。
どれも全く同じ返り値の為、わざわざoptionsを使うのがめんどくさいと感じる初心者も多いと思いますが、この辺はお作法というぐらいの意味しか無いかもしれませんね。
丁寧なプログラムを書くことを目的とする人は、optionsを使ったほうがいいかもしれませんね。
ラベル値の取得方法
そして肝心の選択されているselectタグのラベル値を取得する方法は以下のサンプルでできます。
var select = document.getElementsByTagName("select");
var select_label = (function(select){
for(var i=0; i<select.options.length; i++){
if(select.options[i].selected === true){
return select.options[i].text;
}
}
return null;
})(select[0]);
select変数は、selectタグの要素を指定してあげるだけでかまいません。
とりあえず、これでラベル値の取得はサクッとできてしまうので、コピペで使ってくださいませ。
今回、ラベル値について調査して、ダイレクト取得の情報が見つけられなくて書いた記事なのですが、もし基本機能にダイレクトアクセスできるプロパティなどがある事を知っている人がいたらこっそり教えてください。
0 件のコメント:
コメントを投稿