CODEWITHSUNDEEP
javascriptjquery
Tui Popenoe
Tui Popenoe

Reputation: 2124

Alternative to .change in jquery?

I'm trying to fire an ajax event, and passing the value of select list options as arguments in the ajax call. Unfortunately, I'm firing the call on the .change event, and it is passing the values of the select option before the new option has been selected (i.e passing the previously selected options values). Is there an event which will get the current values of the option selected? Much thanks in advance,

<select id='theList'>
   <option> Option 1</option>
   <option> Option 2</option>
</select>

In the JS:

$('#theList').change( function() {
$.getJSON('Home/MethodName', { var1: Option1Value, var2: MiscValue}, function(data) {
      //Execute instructions here
}
)});

I wanted to use .trigger, but I think that fires beforehand as well.

Upvotes: 3

Views: 2985

Answers (3)

Spinstaz
Spinstaz

Reputation: 331

A word of warning, .change is now defunct, you should use...

.on('change', function()

Like that.

Upvotes: 0

Louis Ricci
Louis Ricci

Reputation: 21116

You must be doing something wrong when getting the current select value. The following works correctly for me.

http://jsfiddle.net/TJ2eS/

<select id="demo">
    <option value=""></option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

$("#demo").change(function() {
    alert("current select value " + $(this).val());
});

Upvotes: 0

kevingessner
kevingessner

Reputation: 18995

I think .change() is what you want, but you're misusing it. The change event fires after the value has changed. In your handler, you need to read the new value:

$('#theList').change( function() {
  var value = $('#theList').val();
  $.getJSON('Home/MethodName', { your_key: value }, function(data) {
      // ...
  }
)});

You also might want to set values on your <option> tags:

<option value="something"> Option 2</option>

Upvotes: 4

Related Questions