jqueryで、プルダウンメニューの選択した項目をページごとに変更したい

Question

実現したいこと

都道府県別に用意された全46ページそれぞれに、都道府県名を選択する共通のプルダウンメニューを埋め込んでいます。

この時、ページのURLの文字列を判別して、例えば「saitama」が入っていたら、option要素のtext部分の「埼玉県」になっているところに「selected」を入れることで、該当の県名があらかじめプルダウンで選択されているようにしたいと思いました。

そこで、下記のようなコードを書き、なんとか動作もOKだったのですが、
ほぼ同じコードを46回コピペしているところがあまりにも芸がない感じで、
もう少しまとめた記述にしたいと思っています。
しかし、それにはどうやって記述したらよいのか分かりません。

なにかもっとうまい記述方法があれば、ぜひとも教えていただければと思います。
よろしくお願いいたします。

該当のソースコード

$(window).bind("load", function(){

if(document.URL.match(/hokkaido/) ) {
     $('#select_region option').filter(function(index){
        return $(this).text() === '北海道'; 
    }).prop('selected', true);

    }else if(document.URL.match(/aomori/) ) {
     $('#select_region option').filter(function(index){
        return $(this).text() === '青森県'; 
    }).prop('selected', true);

    }else if(document.URL.match(/akita/) ) {
     $('#select_region option').filter(function(index){
        return $(this).text() === '秋田県'; 
    }).prop('selected', true);
    

<!-- これ以降、ずっと沖縄県までくりかえし-->

    }
});

<form>
    <select name="sel" id="select_region">
    <option value="ドメイン名/">都道府県を選ぶ</option>
    <option value="ドメイン名/hokkaido">北海道</option>
    <option value="ドメイン名/aomori">青森県</option>
    <option value="ドメイン名/akita">秋田県</option>
    <option value="ドメイン名/iwate">岩手県</option>
    <option value="ドメイン名/miyagi">宮城県</option>
    <option value="ドメイン名/yamagata">山形県</option>
    <option value="ドメイン名/fukushima">福島県</option>
    <option value="ドメイン名/ibaraki">茨城県</option>
    <option value="ドメイン名/tochigi">栃木県</option>
    <option value="ドメイン名/gunma">群馬県</option>
    <option value="ドメイン名/saitama">埼玉県</option>
    <option value="ドメイン名/chiba">千葉県</option>
    <option value="ドメイン名/tokyo">東京都</option>
    <option value="ドメイン名/kanagawa">神奈川県</option>
    <option value="ドメイン名/yamanashi">山梨県</option>
    <option value="ドメイン名/nagano">長野県</option>
    <option value="ドメイン名/niigata">新潟県</option>
    <option value="ドメイン名/shizuoka">静岡県</option>
    <option value="ドメイン名/aichi">愛知県</option>
    <option value="ドメイン名/mie">三重県</option>
    <option value="ドメイン名/gifu">岐阜県</option>
    <option value="ドメイン名/fukui">福井県</option>
    <option value="ドメイン名/toyama">富山県</option>
    <option value="ドメイン名/ishikawa">石川県</option>
    <option value="ドメイン名/osaka">大阪府</option>
    <option value="ドメイン名/shiga">滋賀県</option>
    <option value="ドメイン名/nara">奈良県</option>
    <option value="ドメイン名/kyoto">京都府</option>
    <option value="ドメイン名/hyogo">兵庫県</option>
    <option value="ドメイン名/wakayama">和歌山県</option>
    <option value="ドメイン名/ehime">愛媛県</option>
    <option value="ドメイン名/kochi">高知県</option>
    <option value="ドメイン名/kagawa">香川県</option>
    <option value="ドメイン名/tokushima">徳島県</option>
    <option value="ドメイン名/okayama">岡山県</option>
    <option value="ドメイン名/hiroshima">広島県</option>
    <option value="ドメイン名/tottori">鳥取県</option>
    <option value="ドメイン名/shimane">島根県</option>
    <option value="ドメイン名/yamaguchi">山口県</option>
    <option value="ドメイン名/fukuoka">福岡県</option>
    <option value="ドメイン名/oita">大分県</option>
    <option value="ドメイン名/kumamoto">熊本県</option>
    <option value="ドメイン名/saga">佐賀県</option>
    <option value="ドメイン名/nagasaki">長崎県</option>
    <option value="ドメイン名/miyazaki">宮崎県</option>
    <option value="ドメイン名/kagoshima">鹿児島県</option>
    </select>
    <div class="jump"><input onclick="top.location.href=sel1.value" type="button" value="詳細ページへ"></div>
    </form>

Comments

[m.ts10806]

実在のドメインのようですが所有者や宣伝目的でないなら公的に使える例示ドメインにしてください。
あと、ドメイン部分はvalueに必須ですか？
/hogehoge
とかではダメですか？

[yukinko]

不慣れなため、不用意な書き方をしてしまい、申し訳ありません。
架空のドメインにしたつもりでしたが、実在の可能性があったので、「ドメイン名」と言う風に書き直しました。ご指摘どうもありがとうございました。

[m.ts10806]

私のコメントにだした[例示ドメイン]についても認識しておいてください。

もう一点、確認を入れていますが、そちらはどうでしょうか。

>あと、ドメイン部分はvalueに必須ですか？
>/hogehoge
>とかではダメですか？

[yukinko]

すみません、「ドメイン部分はvalueに必須ですか？」と言う質問の意図がわからないのですが、
ここで質問する上であえて出す必要があるか？ということでしょうか。

HTMLページとしては、ページに埋め込んだ、フォームのプルダウンを選ぶと、optionのvalue値であるそれぞれの絶対パスをinput buttonのとび先に指定しているので、必須なのですが、そういうことではないのでしょうか.....。

[m.ts10806]

現在の内容だけだとその背景まで分からないのですが、別ドメインなら必須ですが同ドメイン内なら不要です。背景や経緯も記載されたほうが良いと思います。XY問題になると本質的な解決のアドバイスにはならないので。
URLのドメイン以下とvalue値が一致するような設定であればoptionの数だけ書く必要がなくなるので、その方向性での対応を意図していました。

[yukinko]

なるほど！そうなのですか。知りませんでした。教えていただきありがとうございました。

[hatena19]

このスクリプトを置くページのURLは、プルダウンのvalueのどれかと一致しますか。
例えば埼玉県のページのURLは、"ドメイン名/saitama" ですか。
もし、そうなら、
document.getElementById("select_region").value = document.URL;
または、jQueryなら
$('#select_region').val(document.URL);
の１行ですみます。

一致しないにしても何らかの規則性があると思いますので、URLからValue値を生成して、Select要素のvalueに代入すれば選択できます。

[yukinko]

回答ありがとうございます。

おっしゃる通り、このスクリプトを置くページのURLは、プルダウンのvalueと一致します。
つまり、「北海道」ページのurlは「ドメイン名/hokkaido/」となります。
※WordPressのサイトなので、ページのurlは「.html」ではなく、「/」留めになります。

いただいたスクリプトをさっそく試してみたところ、input buttonのジャンプ先は各県のurlがちゃんと入るのですが、プルダウンメニューの表示は「〇〇県」とならず、真っ白になってしまいます。
optionにselectedと入らないからでしょうか。

あと、実は、この都道府県ページはその下に市町村ページもあるので、たとえば、「東京都八王子市」ページ(ドメイン名/tokyo/hachioji/)の場合でも、プルダウンは「東京都」、input buttonのジャンプ先は「ドメイン名/tokyo/」と言う風にしたいのですが、そんなことは可能でしょうか。

[m.ts10806]

/aomori
と
/aomori/
では文字列として一致しないからでは。
document.URLでなにが取れているかを確認すると良いと思います。
あとは先に言及されてるように規則性や法則性を見つける(なければ自分で作る)ことで対応は可能です。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const sel=document.querySelector('[name=sel]');
  const elem=[...sel.querySelectorAll('option:not([value=""])')].filter(x=>new RegExp(x.value).test(location.pathname));
  if(elem) elem[0].selected=true;
});
</script>
<form>
<select name="sel" id="select_region">
<option value="">都道府県を選ぶ</option>
<option value="/hokkaido">北海道</option>
<option value="/aomori">青森県</option>
<option value="/akita">秋田県</option>
<div class="jump">
<input onclick="top.location.href=document.querySelector('[name=sel]').value" type="button" value="詳細ページへ">
</div>
</form>

＃ 調整版
同じページに複数セレクトボックスがある場合、idはつけないでください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const elems=[...document.querySelectorAll('[name=sel] option:not([value=""])')].filter(x=>new RegExp(x.value).test(location.pathname));
  if(elems) elems.forEach(x=>x.selected=true);
});
</script>
<form>
<select name="sel">
<option value="">都道府県を選ぶ</option>
<option value="/hokkaido">北海道</option>
<option value="/aomori">青森県</option>
<option value="/akita">秋田県</option>
</select>
<div class="jump">
<input onclick="top.location.href=this.form.querySelector('[name=sel]').value" type="button" value="詳細ページへ">
</div>
</form>
<hr>
<form>
<select name="sel">
<option value="">都道府県を選ぶ</option>
<option value="/hokkaido">北海道</option>
<option value="/aomori">青森県</option>
<option value="/akita">秋田県</option>
</select>
<div class="jump">
<input onclick="top.location.href=this.form.querySelector('[name=sel]').value" type="button" value="詳細ページへ">
</div>
</form>
<hr>
<form>
<select name="sel">
<option value="">都道府県を選ぶ</option>
<option value="/hokkaido">北海道</option>
<option value="/aomori">青森県</option>
<option value="/akita">秋田県</option>
</select>
<div class="jump">
<input onclick="top.location.href=this.form.querySelector('[name=sel]').value" type="button" value="詳細ページへ">
</div>
</form>

Comments

[yukinko]

ありがとうございます。さっそく試してみましたところ、動作しました！

ただ、実はこのプルダウンメニューは、ページ内にバナーとして3箇所にコピペして置いていまして、
動作したのは、3つのうちの一番上に置いたものだけが、「〇〇県」とプルダウンに表示され、
それ以外のページ中ほどとページ下部に置いた２つは、「都道府県を選ぶ」になってしまいました。

3箇所全部で該当の県名をプルダウン表示させるには、selectの「id="select_region"」を
「class="select_region"」にしたらどうかなと思いましたが、それでも1つだけしか、表示されませんでした。
複数のプルダウンバナーすべてで反応するようにするには、この命令を繰り返しにするようにしたらいいのでしょうか。
でもその書き方が分かりません。

[yukinko]

ありがとうございます。すごい！
3箇所ぜんぶのプルダウンメニューに該当の県名が表示されました！

これでまずは、やってみたいと思います。
再三の質問にも答えてください、本当にどうもありがとうございました。