6

Galera tenho o seguinte select em html.

 <select name='busca' onChange='link()'>
            <option value="1">OP1</option> 
            <option value="2">OP2</option>
            <option value="3">OP3</option>
            <option value="4">OP4</option> 
        </select>    

Preciso criar uma função em jQquey chamada link onde ele dele pega o valor do select e carregar um link, exemplo: envia.php?op=1

Alguém sabe como fazer isso?

1
  • 2
    Você poderia definir "carregar"? Você quer navegar para a URL gerada ou fazer algum tipo de requisição em background? Commented 17/11/2016 às 10:58

4 Respostas 4

8

É possível pelo evento change do próprio jQuery obter o valor:

$('select[name="busca"]').on("change",function(ev){
  var linkEnviar = "envia.php?op=" + $(this).val();
  console.log(linkEnviar);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="busca" name='busca'>
  <option value="1">OP1</option>
  <option value="2">OP2</option>
  <option value="3">OP3</option>
  <option value="4">OP4</option>
</select>

15
  • Lucas o seu código não funciona, quando clico e seleciono uma opção, nada acontece. Commented 17/11/2016 às 11:19
  • Para mim está executando: imgur.com/a/hcYQS
    – BrTkCa
    Commented 17/11/2016 às 11:25
  • estranho eu copiei o código para uma página minha e esta dando erro. O estranho que que aqui no stack ele executa normalmente. Commented 17/11/2016 às 11:47
  • no meu consele fica aparecendo uns caracter estranho, cr Commented 17/11/2016 às 11:49
  • Se você puder compartilhar o trecho do seu código html e javascript podemos ajudar
    – BrTkCa
    Commented 17/11/2016 às 11:54
7

Coloca a lógica no jQuery e podes usar this.value para saber o valor do select dentro de uma callback do evento change assim:

$('select[name="busca"]').on('change', link);

function link() {
    $.ajax({
        method: "POST",
        url: "envia.php",
        data: {op: this.value} // <---- aqui passas o valor
    }).done(function(msg) {
        alert(msg);
    });
}
4
  • acredito que a opção deva ir na própria url @Sergio, por usar argumento no exemplo que OP postou..sugere ser um método get
    – BrTkCa
    Commented 17/11/2016 às 10:55
  • @LucasCosta passei isso no objeto "data": data: {op: this.value}
    – Sergio
    Commented 17/11/2016 às 10:56
  • 1
    Não ficou muito claro para mim (pelo termo "carregar") se o OP está querendo fazer uma requisição ajax ou navegar para a URL (window.location.href). Vamos ver pela reação dele Commented 17/11/2016 às 10:57
  • Agora vi que você editou :)
    – BrTkCa
    Commented 17/11/2016 às 10:57
2

Segue exemplo. HTML:

$(document).ready(function(){    
  $("#selecao").on("change", teste);
});
var teste = function(evt){
                var valorSelecionado = evt.target.value;
  console.log(evt.target.value);
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="selecao">
  <option value="1">Opção 1</option>
  <option value="2">Opção 2</option>
  <option value="3">Opção 3</option>
</select>

jQuery:

$(document).ready(function(){document.getElementById("selecao").addEventListener("change", teste);}
var teste = function(evt){
                var valorSelecionado = evt.target.value;
            }
2
  • muito bom, era isso mesmo :) Commented 6/12/2016 às 19:48
  • o value do <select> é o value do <option> selecionado Commented 6/12/2016 às 19:51
1

Também da para fazer com javascript puro:

<select name='busca' onChange='location.href="envia.php?op="+this.value'>
            <option value="1">OP1</option> 
            <option value="2">OP2</option>
            <option value="3">OP3</option>
            <option value="4">OP4</option> 
        </select>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .