Corredor

ウェブ、プログラミングの勉強メモ。

アンケートサイトで使える!都道府県セレクトボックスを自動選択するブックマークレット

基礎から徹底的に学ぶJavaScript

基礎から徹底的に学ぶJavaScript

アンケートサイトで使えそうなブックマークレット、第2弾。よくある「あなたがお住いの都道府県を選択してください」というセレクトボックスを自動選択するブックマークレットを作った。

サンプル

サンプルは以下の CodePen より、「Select City」を操作してみてほしい。

See the Pen Survey Helpers by Neos21 (@Neos21) on CodePen.

ブックマークレットコード

ブックマークレット用のコードは以下。

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 要素を選択するようにしている。

たったコレだけなのだが、イチイチセレクトボックスから都道府県を探して選択するより格段に楽になっているだろう。