プルダウンメニューの絞込みで、<option>タグに何か情報を持たせ、それを使って実施しようと考えて、最初の頃に作った絞込み用の処理を見ていると、「data-val」という項目を設定している部分があった。その時は新規にこのようなプロパティが追加になっているという認識だったのだが、どうやら違っていたようだ。
<option value="1000" data-level="1">大項目１</option>
<option value="1100" data-level="2">中項目１</option>
<option value="1101" data-level="0">小項目１</option>
<option value="1102" data-level="0">小項目２</option>
<option value="1200" data-level="2">中項目２</option>
<option value="1201" data-level="0">小項目３</option>
こんな風にHTMLを書いておくと、JavaScriptでこの「data-level」の値が取得できるようだ。
var pulldown1 = document.getElementById( "pulldown1" ) ;
var selected_index = pulldown1.selectedIndex ;
var selected_level = pulldown1.options[selected_index].dataset["level"] ;
こんな感じで、選択した項目のレベルを取得する事ができ、判定に使えるという事らしい。成る程！set/getAttributeみたいのもそう言えばあったような気もするけど、この「data-XXX」という手法を用いれば、HTML5準拠で、jQueryでも扱いやすくなるようだし、これを活用してみよう。
そういえば、他の部分でもタグにデータを持たせたいと思ってた処理がいくつかあって、無理やりnameとかidを使って対応した部分があったはず。また後日この部分もdataset配列で実装し直した方がいいだろうな。nameやidは本来の用途で使いたい。