質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.68%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

377閲覧

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

yukinko

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2023/06/05 06:47

編集2023/06/05 07:33

実現したいこと

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

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

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

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

該当のソースコード

jquery

1$(window).bind("load", function(){ 2 3if(document.URL.match(/hokkaido/) ) { 4 $('#select_region option').filter(function(index){ 5 return $(this).text() === '北海道'; 6 }).prop('selected', true); 7 8 }else if(document.URL.match(/aomori/) ) { 9 $('#select_region option').filter(function(index){ 10 return $(this).text() === '青森県'; 11 }).prop('selected', true); 12 13 }else if(document.URL.match(/akita/) ) { 14 $('#select_region option').filter(function(index){ 15 return $(this).text() === '秋田県'; 16 }).prop('selected', true); 17 18 19<!-- これ以降、ずっと沖縄県までくりかえし--> 20 21 } 22}); 23

html

1<form> 2 <select name="sel" id="select_region"> 3 <option value="ドメイン名/">都道府県を選ぶ</option> 4 <option value="ドメイン名/hokkaido">北海道</option> 5 <option value="ドメイン名/aomori">青森県</option> 6 <option value="ドメイン名/akita">秋田県</option> 7 <option value="ドメイン名/iwate">岩手県</option> 8 <option value="ドメイン名/miyagi">宮城県</option> 9 <option value="ドメイン名/yamagata">山形県</option> 10 <option value="ドメイン名/fukushima">福島県</option> 11 <option value="ドメイン名/ibaraki">茨城県</option> 12 <option value="ドメイン名/tochigi">栃木県</option> 13 <option value="ドメイン名/gunma">群馬県</option> 14 <option value="ドメイン名/saitama">埼玉県</option> 15 <option value="ドメイン名/chiba">千葉県</option> 16 <option value="ドメイン名/tokyo">東京都</option> 17 <option value="ドメイン名/kanagawa">神奈川県</option> 18 <option value="ドメイン名/yamanashi">山梨県</option> 19 <option value="ドメイン名/nagano">長野県</option> 20 <option value="ドメイン名/niigata">新潟県</option> 21 <option value="ドメイン名/shizuoka">静岡県</option> 22 <option value="ドメイン名/aichi">愛知県</option> 23 <option value="ドメイン名/mie">三重県</option> 24 <option value="ドメイン名/gifu">岐阜県</option> 25 <option value="ドメイン名/fukui">福井県</option> 26 <option value="ドメイン名/toyama">富山県</option> 27 <option value="ドメイン名/ishikawa">石川県</option> 28 <option value="ドメイン名/osaka">大阪府</option> 29 <option value="ドメイン名/shiga">滋賀県</option> 30 <option value="ドメイン名/nara">奈良県</option> 31 <option value="ドメイン名/kyoto">京都府</option> 32 <option value="ドメイン名/hyogo">兵庫県</option> 33 <option value="ドメイン名/wakayama">和歌山県</option> 34 <option value="ドメイン名/ehime">愛媛県</option> 35 <option value="ドメイン名/kochi">高知県</option> 36 <option value="ドメイン名/kagawa">香川県</option> 37 <option value="ドメイン名/tokushima">徳島県</option> 38 <option value="ドメイン名/okayama">岡山県</option> 39 <option value="ドメイン名/hiroshima">広島県</option> 40 <option value="ドメイン名/tottori">鳥取県</option> 41 <option value="ドメイン名/shimane">島根県</option> 42 <option value="ドメイン名/yamaguchi">山口県</option> 43 <option value="ドメイン名/fukuoka">福岡県</option> 44 <option value="ドメイン名/oita">大分県</option> 45 <option value="ドメイン名/kumamoto">熊本県</option> 46 <option value="ドメイン名/saga">佐賀県</option> 47 <option value="ドメイン名/nagasaki">長崎県</option> 48 <option value="ドメイン名/miyazaki">宮崎県</option> 49 <option value="ドメイン名/kagoshima">鹿児島県</option> 50 </select> 51 <div class="jump"><input onclick="top.location.href=sel1.value" type="button" value="詳細ページへ"></div> 52 </form> 53 54

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

m.ts10806

2023/06/05 07:20

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

2023/06/05 07:36

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

2023/06/05 08:18 編集

私のコメントにだした[例示ドメイン]についても認識しておいてください。 もう一点、確認を入れていますが、そちらはどうでしょうか。 >あと、ドメイン部分はvalueに必須ですか? >/hogehoge >とかではダメですか?
yukinko

2023/06/05 08:36 編集

すみません、「ドメイン部分はvalueに必須ですか?」と言う質問の意図がわからないのですが、 ここで質問する上であえて出す必要があるか?ということでしょうか。 HTMLページとしては、ページに埋め込んだ、フォームのプルダウンを選ぶと、optionのvalue値であるそれぞれの絶対パスをinput buttonのとび先に指定しているので、必須なのですが、そういうことではないのでしょうか.....。
m.ts10806

2023/06/05 08:54 編集

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

2023/06/05 08:56

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

2023/06/05 16:23 編集

このスクリプトを置くページのURLは、プルダウンのvalueのどれかと一致しますか。 例えば埼玉県のページのURLは、"ドメイン名/saitama" ですか。 もし、そうなら、 document.getElementById("select_region").value = document.URL; または、jQueryなら $('#select_region').val(document.URL); の1行ですみます。 一致しないにしても何らかの規則性があると思いますので、URLからValue値を生成して、Select要素のvalueに代入すれば選択できます。
yukinko

2023/06/06 04:09

回答ありがとうございます。 おっしゃる通り、このスクリプトを置くページのURLは、プルダウンのvalueと一致します。 つまり、「北海道」ページのurlは「ドメイン名/hokkaido/」となります。 ※WordPressのサイトなので、ページのurlは「.html」ではなく、「/」留めになります。 いただいたスクリプトをさっそく試してみたところ、input buttonのジャンプ先は各県のurlがちゃんと入るのですが、プルダウンメニューの表示は「〇〇県」とならず、真っ白になってしまいます。 optionにselectedと入らないからでしょうか。 あと、実は、この都道府県ページはその下に市町村ページもあるので、たとえば、「東京都八王子市」ページ(ドメイン名/tokyo/hachioji/)の場合でも、プルダウンは「東京都」、input buttonのジャンプ先は「ドメイン名/tokyo/」と言う風にしたいのですが、そんなことは可能でしょうか。
m.ts10806

2023/06/06 04:21

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

回答1

0

ベストアンサー

javascript

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

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

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const elems=[...document.querySelectorAll('[name=sel] option:not([value=""])')].filter(x=>new RegExp(x.value).test(location.pathname)); 4 if(elems) elems.forEach(x=>x.selected=true); 5}); 6</script> 7<form> 8<select name="sel"> 9<option value="">都道府県を選ぶ</option> 10<option value="/hokkaido">北海道</option> 11<option value="/aomori">青森県</option> 12<option value="/akita">秋田県</option> 13</select> 14<div class="jump"> 15<input onclick="top.location.href=this.form.querySelector('[name=sel]').value" type="button" value="詳細ページへ"> 16</div> 17</form> 18<hr> 19<form> 20<select name="sel"> 21<option value="">都道府県を選ぶ</option> 22<option value="/hokkaido">北海道</option> 23<option value="/aomori">青森県</option> 24<option value="/akita">秋田県</option> 25</select> 26<div class="jump"> 27<input onclick="top.location.href=this.form.querySelector('[name=sel]').value" type="button" value="詳細ページへ"> 28</div> 29</form> 30<hr> 31<form> 32<select name="sel"> 33<option value="">都道府県を選ぶ</option> 34<option value="/hokkaido">北海道</option> 35<option value="/aomori">青森県</option> 36<option value="/akita">秋田県</option> 37</select> 38<div class="jump"> 39<input onclick="top.location.href=this.form.querySelector('[name=sel]').value" type="button" value="詳細ページへ"> 40</div> 41</form>

投稿2023/06/06 00:38

編集2023/06/06 06:07
yambejp

総合スコア112760

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

yukinko

2023/06/06 05:48

ありがとうございます。さっそく試してみましたところ、動作しました! ただ、実はこのプルダウンメニューは、ページ内にバナーとして3箇所にコピペして置いていまして、 動作したのは、3つのうちの一番上に置いたものだけが、「〇〇県」とプルダウンに表示され、 それ以外のページ中ほどとページ下部に置いた2つは、「都道府県を選ぶ」になってしまいました。 3箇所全部で該当の県名をプルダウン表示させるには、selectの「id="select_region"」を 「class="select_region"」にしたらどうかなと思いましたが、それでも1つだけしか、表示されませんでした。 複数のプルダウンバナーすべてで反応するようにするには、この命令を繰り返しにするようにしたらいいのでしょうか。 でもその書き方が分かりません。
yukinko

2023/06/07 08:14 編集

ありがとうございます。すごい! 3箇所ぜんぶのプルダウンメニューに該当の県名が表示されました! これでまずは、やってみたいと思います。 再三の質問にも答えてください、本当にどうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.68%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。