0

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

<select>
<option selected value="news">Новости</option>
<option value="articles">Статьи</option>
<option value="popular">Популярное</option>
</select>
2
  • через js выставлять нужное значение
    – teran
    9 сен 2021 в 22:06
  • и как это будет выглядеть?
    – Lion
    10 сен 2021 в 4:50

1 ответ 1

1

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

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>

6
  • Спасибо большое. Но как его применить к параметру value? Нет возможности записать id в самом option.
    – Lion
    13 сен 2021 в 5:30
  • 1
    @Lion вообще не понял, что вы спросили. Код работает так: если переходите по странице #news, то выбирается опция с value=news, что вы хотите? 13 сен 2021 в 5:33
  • 1
    @Lion а вы проверили? скрипту вообще не нужны айди и классы, только айди для <select>, чтобы найти элемент, в котором размещаются <option>, хотя можно и без id у select обойтись, прописав нужный селектор в document.querySelectorAll 13 сен 2021 в 6:12
  • 1
    @Lion если вам код подходит (id у option не нужны), будьте добры, подарите галочку 13 сен 2021 в 7:14
  • 1
    разобрался. Все работает! Спасибо огромное!
    – Lion
    13 сен 2021 в 7:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.