URLの値によってプルダウンの表示を変えたい

Question

現在、下記のようにプルダウンを押したら、そのvalueの値がURLに入って、ページ移動するようにしました。
ただ、現状ではページ移動すると、「選択してください」に戻ってしまいます。

そこで、URLの一番最後の部分、
例えば「新着」なら【https://www.●●●●.●●●/001/】となるのですが、その【/001/】と【value="/001/"】が一致していれば、
そこに【selected】を付与するようにしたいのですが、それができません。

もし分かりましたら教えて頂けますと幸いです。

jsで行いたいので、【selected】を付与するやり方でご教授頂けますと幸いです。

<select name="select" onchange="location.href=value;" style="height: 24px;">
  <option value="#">選択してください</option>
  <option value="/001/">新着</option>
  <option value="/002/">安い順</option>
  <option value="/003/">高い順</option>
</select>

$('option[value$="'+location.href.split('/').slice(-1)[0]+'"]').prop('selected','selected');

Answer 1

DOMContentLoadedだとページバックした時コード動かず前ページの選択が残っちゃうんですよね…
なのでpageshow使ってみました。タイミングはonloadより後になりますが。

<script>
    window.addEventListener('pageshow', () => {
        const selOpt = document.querySelector(`option[value="${location.pathname}"]`);
        if (selOpt !== null) selOpt.selected = true;
        else document.querySelector('option[value="#"]').selected = true;
    });
</script>
<select name="select" onchange="location.href=value;" style="height: 24px;">
    <option value="#">選択してください</option>
    <option value="/001/">新着</option>
    <option value="/002/">安い順</option>
    <option value="/003/">高い順</option>
</select>

Answer 2

こんな感じですかねぇ？

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('#s option').forEach(x=>{
var a=Object.assign(document.createElement('a'),{href:x.value});
if(location.href==a.href){
x.selected=true;
};
});
});
</script>
<select name="s" id="s" >
<option value="#">選択してください</option>
<option value="/001/">新着</option>
<option value="/002/">安い順</option>
<option value="/003/">高い順</option>
</select>