How to know with jQuery that a "select" input value has been changed?

Question

I know that there is the change event handling in jQuery associated with an input of type select . But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value ! In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?

Answer 1

First of all you may use select event handler (to set values for some flags). This is how it works:

$('#select').change(function () {
  alert($(this).val());
});​

Demo: http://jsfiddle.net/dXmsD/

Or you may store the original value somewhere and then check it:

$(document).ready(function () {
  var val = $('#select').val();    
  ...
  // in some event handler
  if ($('#select').val() != val) ...
  ...
});

Answer 2

You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.

That only solves half your problem though. You want to know when a different element has been selected.

You could do this by creating a tracking variable that updates every time the event is fired.

To start with, give your tracking variable a value that'll never appear in the dropdown.

// Hugely contrived!  Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";

Then, you'll need to set up a function to handle the change event.

Something as simple as:-

var checkChange = function() {
  // If current value different from last tracked value
  if ( trackSelect != $('#yourDD').val() )
  {
     // Do work associated with an actual change!
  }

  // Record current value in tracking variable
  trackSelect = $('#yourDD').val();
}

Finally, you'll need to wire the event up in document.ready.

$(document).ready(function () {
  $('#yourDD').bind('change', function (e) { checkChange() });
});

Answer 3

You can save the value on page load in some hidden field.

like

    $(document).ready(function(){
 $('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
    $('selectBoxId').change(function(){
    var valChng = $(this).val();
    // now match the value with hidden field
    if(valChng == $('hiddenFieldId').val()){ 
    }
    });

Answer 4

First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.

Check out the sample !

$(document).ready(function() {
    var lastValue, selectedValue;
    $('#select').change(function() {
        selectedValue = $(this).find(':selected').val();
        if(selectedValue == lastValue) {
            alert('the value is the same');
        }            
        else {
            alert('the value has changed');
            lastValue = selectedValue;
        }
    }); 
});​

Answer 5

 $("select").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            str += $(this).text() + " ";
          });
      $("div").text(str);
    })
    .change();

http://docs.jquery.com/Events/change