Jump to section after selecting option

Question

Jump to section after selecting option

Navigation

#1 by (0 votes)

0

What I want to do is: I have a select with 5 options , I want when I select, for example, option1 , go to first section , when I click 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 sections defined so

<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 I also have my code in JS, I still just select 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";

JS study a few days ago and I wanted to be able to do this, but I'm not sure how to do it.

javascript

asked by anonymous 12.05.2017 / 00:39

1 answer

Make a WHILE run from the click of a button Using Gson instead of Jackson on web service that makes use of Jersey

score 0 · Accepted Answer

First, I advise you to slightly modify your select and add an attribute in options for which section you want to view. For custom attributes, use the data- prefix. For example, we can set a data-anchor attribute to option to specify which section should 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>

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

With JavaScript, you can treat the event onchange of select , obtaining the value of data-anchor of option , and setting the value of location.hash to this value. This way, your URL will display the #brasiljs part, 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: When you select a new option, you will automatically be moved to its 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>