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