アンケートサイトで使える!都道府県セレクトボックスを自動選択するブックマークレット
アンケートサイトで使えそうなブックマークレット、第2弾。
よくある「あなたがお住いの都道府県を選択してください」というセレクトボックスを自動選択するブックマークレットを作った。
目次
サンプル
サンプルは以下より、「Select City」を操作してみてほしい。
- デモ : Survey Helpers Parts
- コード : frontend-sandboxes/survey-helpers-parts.html at master · Neos21/frontend-sandboxes
ブックマークレットコード
ブックマークレット用のコードは以下。
javascript:((S)=>{Array.prototype.forEach.call(document.querySelectorAll('option'),e=>{e.innerHTML.includes(S)&&(e.selected=!0)})})('東京');
コードの末尾に '東京'
と書いてあるところがある。コレが選択される都道府県名になるので、「沖縄」とか「千葉」とか、好きな名称にしてもらえば良い。
その都道府県名称を「含む」かどうか、で判定しているので、名称に「都・道・府・県」は含めない方が良いだろう (つまり「沖縄県」とは書かず「沖縄」とする)。
ソースコード
元のコードは以下のとおり。
/**
* select 要素から指定の都道府県名を含む選択肢を選択する
*
* @param cityName 都道府県名称。「沖縄県」なら「沖縄」というように、短めに指定しておく
*/
function selectCity(cityName) {
Array.prototype.forEach.call(document.querySelectorAll('option'), (option) => {
if(option.innerHTML.includes(cityName)) {
option.selected = true;
}
});
}
画面内から、select
要素の中身となる option
要素を取得し、1つずつ検証。option
要素内の文言に指定の都道府県名が含まれていたら、その option
要素を選択するようにしている。
たったコレだけなのだが、イチイチセレクトボックスから都道府県を探して選択するより格段に楽になっているだろう。
以下続編。