capture value of < option > with jQuery

Asked

Viewed 790 times

6

You guys, I got this select 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>

I need to create a function in jQquey called link where it takes the value of select and load a link, example: envia.php?op=1

Someone knows how to do it?

javascript jquery
  • 2

    Could you set "load"? Do you want to navigate to the generated URL or do some sort of background request?

4 answers

8


It is possible by the event change own jQuery get value:

$('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>

  • Lucas your code doesn’t work, when I click and select an option, nothing happens.

  • For me it is running: http://imgur.com/a/hcYQS

  • strange I copied the code to a page of mine and this giving error. Strange that here in the stack it runs normally.

  • in my consele keeps appearing a strange character, cr

  • If you can share the snippet of your html code and javascript we can help

  • I was making the selection by id, changed the answer to get by name exactly like your case 'select[name="busca"]'

  • Okay, the error on my console looks like this: ReferenceError: Can't find variable: $

  • look at the strange characters that appear https://s22.postimg.org/gltuq0old/Captura_de_Tela_2016_11_17_10_01_14.png

  • The first mistake is because he didn’t recognize jQuery. Are you loading where jQuery? Which version?

  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • The CDN is wrong, replace with: <script src="https://code.jquery.com/jquery-2.1.min.js"></script>

  • ok, it worked hahahaha. Thank you. Now how do I call the link? I tried so document.location=linkEnviar; but it didn’t work out

  • Maybe you’re looking for location.href = '/' + linkEnviar;

  • it worked out thank you

  • wonder of nothing :)

Show 10 more comments

7

Put logic in jQuery and you can use this.value to know the value of select within an event callback change thus:

$('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);
    });
}

  • I believe the option should go in the url itself @Sergio, for using argument in the example OP posted.. suggests to be a get method

  • @Lucascosta passed this on the object "date": data: {op: this.value}

  • 1

    It was not very clear to me (by the term "load") if the OP is wanting to make an ajax request or navigate to the URL (window.location.href). Let’s see how he reacts

  • Now I see you’ve edited :)

2

The following is an example. 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;
            }

  • very good, that’s right :)

  • the value of the <select> is the value of the selected <option> value

1

Also to do with pure javascript:

<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>

Browser other questions tagged javascript jquery

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