How to make optgroup access a page

Asked

Viewed 60 times

1

I have a code and I want it to work as follows: I created a list of options within a optgroup and I want as soon as I click on an option, it go to the page I want.

Example:

<optgroup>
<option>Opcao1</option>
<option>Opcao2</option>
<option>Opcao3</option>
</optgroup>

And once you clicked on option 2, for example, it would access the following url: www.site.com/lista/Opcao2/index.html

So the pattern would be: www.site.com/lista/(opção escolhida)/index.html

Currently the code is like this (for now):


And on the website it’s like this:

Would have some way without using php?

javascript html html-option selected-option

  • Does optgroup have information for the link? or just the option? How are you generating this html? on the server or browser?

  • @Sergio I’m making a news site about series, so the code is like this (for now): http://prntscr.com/fv007a E on the site like this: http://prntscr.com/fv00em

1 answer

1


To be something interpreted in the click it is necessary to listen to the event onchange of the label <select>,and when it happens we change from url modifying the window.location.href:

Example:

document.getElementById("cEst").onchange=function(){ 
  //this.value tem o valor que foi escolhido nas opções
  window.location.href = "www.site.com/lista/" + this.value + "/index.html"; 
}
<select name="tEst" id="cEst">
  <optgroup>
    <option>Opcao1</option>
    <option>Opcao2</option>
    <option>Opcao3</option>
  </optgroup>
</select>

I advise you to be careful with the spaces in the url as they are converted to other characters (normally + or %20) and for this reason may not work.

  • Put the <script> at the end of the label <body>

Browser other questions tagged javascript html html-option selected-option

You are not signed in. Login or sign up in order to post.