前回の質問の続きとなります(一旦解決)。読んでいただく必要はないかもしれませんが念のため
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**">
###そもそもの実現したいこと
【その1】セレクトメニューを選択した場合、valueに指定したURLにジャンプさせる。
【その2】「その1」でジャンプした先のページの「option」に「selected」を付ける。
【その3】セレクトメニュー以外の<li>ナビゲーションでページを移動した場合にも移動先のアドレスバーとセレクトメニューのURL末尾のページ名が一致同じものに「selected」を付けたい
【その1】【その2】までは前回の質問で解決済です。
下記のようなメニューを作成しております。
例えばセレクトメニューで「部署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>
実現したいこと【その1】【その2】までは前回の質問で助けをいただいて、
「最新の売り上げページ(2017年1月)」への「option」には下記記述にて「selected」を付けることができました。
javascript
1$('select').val(location.href);
ただ、【その3】の過去の「部署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件
あなたの回答
tips
プレビュー