Изменение значения option select при нажатии на элемент другой страницы

// Ссылка, находящаяся на странице 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);
});