Как изменить значение option select при нажатии на элемент другой страницы?

Question

[DimaL1990]

/ /Ссылка, находящаяся на странице index.html
<div class="img_course">
  <a href="index_form.html" class="d-flex justify-content-between building"  data-n="2">
    <img src="img/L1.svg" alt="">
    <h5 class="text-uppercase d-flex justify-content-center align-items-center">Строительство</h5>
  </a>
</div>

// select, значение которого нужно изменить, находится на  странице index_form.html
<select id="select_specialization" class="form-control select">
 <option selected>Специализация</option>
 <option class="option" value="1">Строительство</option>
 <option class="option" value="2">Слесарные cециальности</option>
 <option class="option" value="3">металообработка</option>
 <option class="option" value="4">Механизаторы</option>
 <option class="option" value="5">Пожтехминимум</option>
 <option class="option" value="6">И другие</option>
</select>

// код js, который работает, когда ссылка и select находятся на одной странице, но не работает, когда 
на //разных
$(".building").on("click", function () {
  var id = $(this).attr("data-n");
  $(".select")
   .find("[value=" + id + "]")
   .prop("selected", true);
});

Comments

[Just Me]

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

[Роман Дворянов]

Вам в любом случае нужно где-то хранить(сохранять) значение, варианта два:
- куки, как описали выше
- localStorage

И на странице где используете option брать значение, которое сохранили ранее и вставлять.

Используйте что больше нравится

Answer 1

[Роман Дворянов]

var selectedId = localStorage.getItem('selectedId');
function setSelectId(id) {
  $(".select")
     .find("[value=" + selectedId + "]")
     .prop("selected", true);
  })
}

if (selectedId) {
  setSelectId(selectedId);
}

$(".building").on("click", function () {
  var id = $(this).attr("data-n");
  localStorage.setItem('selectedId', id);

  if (id !== selectedId) {
    setSelectId(id);
  }
});