投稿2017/01/05 02:35
編集2017/01/05 04:54前回の質問の続きとなります（一旦解決）。読んでいただく必要はないかもしれませんが念のため
https://teratail.com/questions/60882
###実現したいこと
セレクトメニューのoptionのvalueに指定した末尾のページ名と、アドレスバーの末尾のページ名が合致した場合にoptionに「selected」をつけたい
下記で<li>をクリックした場合にリンク先のページで<option>に「selected」を付けたい。
<option value="http://example.com/aaaa/**page-c.html**"> <li><a href="http://example.com/bbbb/**page-c.html**">
###そもそもの実現したいこと
【その１】セレクトメニューを選択した場合、valueに指定したURLにジャンプさせる。
【その２】「その1」でジャンプした先のページの「option」に「selected」を付ける。
【その３】セレクトメニュー以外の<li>ナビゲーションでページを移動した場合にも移動先のアドレスバーとセレクトメニューのURL末尾のページ名が一致同じものに「selected」を付けたい
【その１】【その２】までは前回の質問で解決済です。
下記のようなメニューを作成しております。
例えばセレクトメニューで「部署C売上（2017年1月）」を選択した場合を例としております。
html
1<h2>各部署売上</h2><!-- ※各部署売上更新日にバラツキがある。--> 2<form action="#" name="form"> 3<select onChange="location.href=value;"> 4 <option value="http://example.com/2017/01/page-a.html">部署A売上（2017年1月）</option> 5 <option value="http://example.com/2016/12/page-b.html">部署B売上（2016年12月）</option> 6 <option value="http://example.com/2017/01/page-c.html">部署C売上（2017年1月）</option> 7 <option value="…"> ・・・ 8 9</select> 10</form> 11 12<h2>部署C月別売上</h2><!-- ※上記セレクトメニューで「部署C売上」を選択した場合下記リストメニューが表示される。--> 13<ul> 14 <li><a href="http://example.com/2017/01/page-c.html">部署C売上（2017年1月）</a></li> 15 <li><a href="http://example.com/2016/12/page-c.html">部署C売上（2016年12月）</a></li> 16 <li><a href="http://example.com/2016/11/page-c.html">部署C売上（2016年11月）</a></li> 17</ul>
実現したいこと【その１】【その２】までは前回の質問で助けをいただいて、
「最新の売り上げページ（2017年1月）」への「option」には下記記述にて「selected」を付けることができました。
javascript
1$('select').val(location.href);
ただ、【その３】の過去の「部署C売上（2016年12月）」や「部署C売上（2016年11月）」を選択し、
ページ移動した場合にも「部署C売上」セレクトメニューの「selected」を付けたく思っております。
上記記述ですと、「アドレスバーのURL」と「value」の値が完全に一致しないため、動作しません。
イメージ的には下記のような感じなのですが、、、
javascript
1$('select').val(「page-c.html」の部分が一致した場合); 2 3//もしくは 4if(document.URL.match("page-c.html")) { 5$('select').val(「page-c.html」の部分が一致した場合); 6} 7 8//下記だと動作しますが、一つずつ追加していくのは現実的でなありません。 9if(document.URL.match("page-c.html")) { 10$('select').val('http://example.com/2016/12/page-c.html'); 11} 12
###補足
本当はWordPressで動的に作成しているものの、htmlで出力しております。
フォルダパスを取得する方法など自分なりに調べてみたのですが、
初心者ゆえ、判定部分の記述方法がわからず
ご教授いただけますと幸いです。
説明もわかり辛いかもしれませんが
必要に応じて補足するようにいたしますので
何卒宜しくお願い申し上げませす。
###===追記===
補足のご依頼を受けましたので、下記追記となります。
（本文も修正済みですが、念のため）
- ここで言う「URL」とはどれですか？
アドレスバーに入っているものですか？
どこかのhref属性に入っているものですか？
アドレスバーに入っているものとなります。
2.『下記で<li>を選択した場合に』とありますが、
『選択』とは具体的にはどういうアクションですか？
クリックでしょうか？ クリックだとすると下にa要素があるので
ページが移動してしまうと思いますが、かまいませんか？
a要素クリックになります。
ページは移動してしまうのですが、
全ページ共通で同じセレクトメニューが上部にある仕様です。
下の<li>メニューはセレクトメニューでの選択項目により
ページ毎で差し変わります。
3.『ページ遷移した場合にも「部署C売上」セレクトメニューの
「selected」を維持したく』とありますが、
前段の内容では実現できなさそうなのですが、よろしいですか？
維持との言い方が良くなかったように思います。
ページを移動した際に、URL（アドレスバー）の末尾「page-c.html」と
セレクトメニューの<option value="http://example.com/aaaa/page-c.html">の末尾の「page-c.html」
が同じ場合に<option value="http://example.com/aaaa/page-c.html" selected="selected">が
付くようにしたいと思っております。
アドレスバーのURLはクリックする<li>により末尾以外は下記の様に変わってしまいます。
http://example.com/bbbb/page-c.html
http://example.com/cccc/page-c.html
回答1件
0
ベストアンサー
javascript
1$('option[value$="'+location.href.split('/').slice(-1)[0]+'"]').prop('selected','selected');
で動きそうな感じです。split関数でURLを配列分割してslice(-1)[0]で最後の配列を抜き出し$=の属性セレクタでマッチさせる、というやり方です。
動作未確認。
投稿2017/01/05 05:04
総合スコア37483
あなたの回答
tips
プレビュー
Q&A
