Jump to Section after selecting option

Question

What I want to do is this: I have a select with 5 options, I want when I select, for example, option1, go to first section, when I click on option2 go to second section.

<select>
    <option class="primeiraOpcao">Brazil JS</option>
    <option class="segundaOpcao">Meetup CSSSP</option>
    <option class="terceiraOpcao">Freecodecamp SP</option>
    <option class="quartaOpcao">Front in Sampa</option>
    <option class="quintaOpcao">Front in BH</option>
</select>

And I have the sections thus defined

<section class="alinhamento" id="braziljs">
<section class="alinhamento" id="meetup">
<section class="alinhamento" id="freecodecamp">
<section class="alinhamento" id="frontinsampa">
<section class="alinhamento" id="frontinbh">

And also I have my code in JS, still just selected the options..

var primeiraOpcao = document.querySelector(".primeiraOpcao");
primeiraOpcao.textContent = "Brazil JS";

var segundaOpcao = document.querySelector(".segundaOpcao");
segundaOpcao.textContent = "Meetup CSSSP";

var terceiraOpcao = document.querySelector(".terceiraOpcao");
terceiraOpcao.textContent = "Freeecodecamp SP";

var quartaOpcao = document.querySelector(".quartaOpcao");
quartaOpcao.textContent = "Front in Sampa";

 var quintaOpcao = document.querySelector(".quintaOpcao");
 quintaOpcao.textContent = "Front in BH";

I’ve been studying JS for a few days and I wanted to be able to do it, but I’m not sure how to do it..

Answer 1

First, I advise you to modify your select and add an attribute in options concerning which section you want to view. For custom attributes, use the prefix data-. For example, we can define an attribute data-anchor in option to specify to which section must be moved:

<select id="choice">
    <option data-anchor="braziljs">Brazil JS</option>
    <option data-anchor="meetup">Meetup CSSSP</option>
    <option data-anchor="freecodecamp">Freecodecamp SP</option>
    <option data-anchor="frontinsampa">Front in Sampa</option>
    <option data-anchor="frontinbh">Front in BH</option>
</select>

Realize the value of data-anchor is exactly the id of section for which you want to visualize and it is very important that it is so, otherwise it will not work.

With Javascript, you can handle the event onchange of select, obtaining the value of data-anchor of option selected and setting the value of location.hash for this value. This way, in your URL will appear the part #brasiljs, for example, moving the page to the element whose id is brasiljs.

const select = document.getElementById("choice");

// Executa quando uma opção for selecionada:
select.onchange = function (event) {
  // Obtém a opção selecionada:
  let option = select.options[select.selectedIndex];
  // Obtém o valor do atributo data-anchor:
  let anchor = option.getAttribute("data-anchor");
  // Move a página para o elemento desejado:
  location.hash = "#" + anchor;
}

Here’s an example: by selecting a new option, you will automatically be moved to the respective section:

const select = document.getElementById("choice");

select.onchange = function(event) {
  let option = select.options[select.selectedIndex];
  let anchor = option.getAttribute("data-anchor");
  location.hash = "#" + anchor;
}

.alinhamento {
  border: 1px solid black;
  margin-bottom: 10px;
  height: 300px;
}

<select id="choice">
  <option data-anchor="braziljs">Brazil JS</option>
  <option data-anchor="meetup">Meetup CSSSP</option>
  <option data-anchor="freecodecamp">Freecodecamp SP</option>
  <option data-anchor="frontinsampa">Front in Sampa</option>
  <option data-anchor="frontinbh">Front in BH</option>
</select>

<section class="alinhamento" id="braziljs">Brasil JS</section>
<section class="alinhamento" id="meetup">Meet Up</section>
<section class="alinhamento" id="freecodecamp">Free Code Camp</section>
<section class="alinhamento" id="frontinsampa">Front in Sampa</section>
<section class="alinhamento" id="frontinbh">Front in BH</section>