Action using select

Question

I have a select

      <select class="select-sala" id="selecionar-aula">

        <option value="">Pagina 1</option>
        <option value="">Pagina 2</option>

      </select>

What I need is that when I select the página 1 it sends me to the url of Page 1 dynamically, without having to click a button and so with the página 2.

How can I do that?

Answer 1

var select = document.getElementById('selecionar-aula');

select.addEventListener('change', function() {
  window.location = select.value;
})

<select class="select-sala" id="selecionar-aula">
  <option value="pagina1.html">Pagina 1</option>
  <option value="pagina2.html">Pagina 2</option>
</select>

Add an event listener in select, take your value and redirect there

Answer 2

I will give my suggestion, without having to create <script> but putting right into the <select>

OBS: I put the first option of <select> as "Select", because if already enter a <option> that has link, even selecting it, vc will not be directed to the page. So I put a "placehoder" at first.

See how it looked in the example

select option[data-default] {
  color: #999; /* cor simulando que o campo está desabilitado depois que abre o select */
}

<select name="forma" onchange="location = this.value;">
  <option selected data-default>- Selecione -</option>
  <option value="/">StackOverflow</option>
  <option value="https://google.com/">Google</option>
  <option value="pagina-1.php">Página 1</option>
  <option value="pagina-2.html">Página 1</option>
</select>