Select with redirection

Asked

Viewed 3,288 times

5

I can’t program! but I can make small changes. I need to create aselect and when the person chooses the item, it is redirected

<select>
  <option value="Vilhena">Vilhena</option>
  <option value="Cacoal">Cacoal</option>
  <option value="Cerejeiras">Cerejeiras</option>
</select>

Ai when selecting Vilhena, be redirected to another page.

javascript jquery select

  • Did you manage to solve this problem? Did any of the questions help to solve?

4 answers

4

Hello, you can do as follows: Create a javascript.

Javascript

<script>
            function AbrirSecao(secao){
                window.open(""+secao+"", "_parent");
            }
</script>

HTML

<select name="unidade" id="unidade" onChange="AbrirSecao(this.value)">
    <option value="">Selecione sua Cidade</option>
    <option value="http://www.google.com">Sua Cidade 1</option>
    <option value="http://www.google.com">Sua Cidade 2</option>
</select>

With this, when selecting the city, it will be redirected automatically by Javascript.

4

Or if you want to use jQuery:

<select id="selecao">
    <option value="http://www.exemplo.com.br">Opção 1</option>
    <option value="http://www.exemplo.com.br">Opção 2</option>
    <option value="http://www.exemplo.com.br">Opção 3</option>
</select>

// requer jquery
<script>
$('#selecao').change(function() {
    window.location = $(this).val();
});
</script>

2

You can also simply put one onclick="location.href='seusite'" at the event onclick of the element option

<select>
  <option value="Vilhena" onclick="location.href='seusite'">Vilhena</option>
  <option value="Cacoal" onclick="location.href='seusite'">Cacoal</option>
  <option value="Cerejeiras" onclick="location.href='seusite'">Cerejeiras</option>
</select>

1

You can do this using native Javascript. That is, without any external library, and without mixing Javascript in HTML (which is not very advisable).

Then you need to consider three things:

  • what to put in HTML
  • the event receiver
  • where to place Javascript

In HTML the visible part is what is between > and < of each option. What’s in the value is that it’s important for the programming part. So instead of having the same value and the text of option puts in the value the URL you want. For example:

<option value="/Vilhena.html">Vilhena</option>

To select the element you can use:

var select = document.querySelector('select');

This will work fine if you only have 1 select on the page. If you have more than one you should give a ID to select (the HTML would look like: <select id="meuSelect">) and you can select it like this:

var select = document.getElementById('meuSelect');
// ou assim:
var select = document.querySelector('#meuSelect');

then attach an event headset for when to change:

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

Finally put the script at the bottom of the page, before the tag </body>. This way Javascript is read with HTML already loaded in memory.

Browser other questions tagged javascript jquery select

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