selectタグの選択肢の中から任意の文字列を含むoptionを探すブックマークレット

セレクトボックスの項目数が多すぎて、選択したい項目を見つけ出すのに苦労することがあります。

任意の項目の先頭文字列が分かっていればセレクトボックスを選択した状態でキーボードから先頭文字列を入力すれば良いのですが、そのテクニックは先頭文字列が分からない場合は使えません。

わりと困っているのでブックマークレットで解決することにしました。

以下のようなwebページがあったとします。

ランダムな数列が並んでいます。

この中から任意の数列を含む項目を探し出すのは至難の業です。

以下のブックマークレットを

javascript:void (function(){var d=document,ss=d.getElementsByTagName('select'),di=d.createElement('DIV'),s='<select>\n',i=0,L=ss.length;d.body.appendChild(di);for(;i<L;i++){s+='<option>'+i+'\n'};di.innerHTML=s+'</select><input><select></select>';var c=di.childNodes,s0=c[0],i0=c[1],s1=c[2],O='onchange',OP='options',sI='selectedIndex';s0[O]=i0[O]=function(){var t=i0.value,o0=ss[s0[sI]][OP],o1=s1[OP],c=0,v;while(o1[0]){o1[0]=null};for(i=0,L=o0.length;i<L;i++){v=o0[i].text;if(-1<v.indexOf(t)){o1[c++]=new Option(v,i)}}};s1[O]=function(){ss[s0[sI]][sI]=this[OP][this[sI]].value}})()

view raw ブクマ_selectボックス内の項目を検索.js hosted with ❤ by GitHub

アドレスバーに張り付けて

先頭の「javascript:」が消えてしまう場合は書き足して



エンターキーを押す。


警告が出た場合は許可してもう一度アドレスバーでエンターキーを押す。


検索ボックスが追加されました。



検索ボックスの使い方は以下の通りです。

• 左端のセレクトボックスで、ページ内にあるセレクトボックスのうち、どれを対象とするかを選択する
• 真ん中のインプットボックスに検索文字列を入力（文字列入力してから左のセレクトボックス変更でもOK）
• 対象セレクトボックスの選択項目の中に、検索文字列を含む項目がある場合はその項目が右端のセレクトボックスに表示されます。
• 右端のセレクトボックスから任意の項目を選択すると、その項目に対応する対象セレクトボックスの項目が選択状態になります。

以下は動作確認用セレクトボックスです。

var s=document.createElement('select'),o=s.options;this.parentNode.appendChild(s);for(var i=0,L=1000;i<L;i++){o[i]=new Option(Math.random())}