При переходе по определенной ссылке менять

Автор вопроса: Lion

Нужно, например, при переходе на site.ru/blog/#news пункт option ненять на selected. И так на каждый option. Как это можно реализовать?

<select>
<option selected value="news">Новости</option>
<option value="articles">Статьи</option>
<option value="popular">Популярное</option>
</select>

Источник

Ответы (1 шт):

Автор решения: highpassion

Этот код работает, если скрипт с кодом присутствует при загрузке новой страницы.

document.addEventListener("DOMContentLoaded", () => {

  document.querySelectorAll("#a option").forEach((o) => {
   
    if(o.getAttribute('value') == window.location.hash.substr(1) ) {
      o.setAttribute('selected', true);
    }
    
    return o;
  });
 
});

<select id="a">
<option id="news" selected value="news">Новости</option>
<option id="articles" value="articles">Статьи</option>
<option id="popular" value="popular">Популярное</option>
</select>

<a href="#news">Go To News</a>
<a href="#articles">Go To Articles</a>
<a href="#popular">Go To Popular</a>

→ Ссылка