jQuery / javascript - How to Check if select box matched original value ?

Question

Hi there,

Just wondering if there is any way to check if the value of a select box drop-down matches the original value at the time of page load (when the value was set using 'selected = "yes"') ?

I guess I could use PHP to create the original values as javascript variables and check against them, but there are a few select boxes and i'm trying to keep the code as concise as possible!

Sorry to be difficult...

Stu

Answer 1

$(document).ready(function() {
    var initialSelectValue = $('#yourselect').val();

    // call this function when you want to check the value
    // returns true if value match, false otherwise
    function checkSelectValue() {
        return $('#yourselect').val() === initialSelectValue;
    }
});

PS. You should use selected="selected" not selected="yes".

Answer 2

You need some kind of persistence to store your "original value" in to compare against.

Answer 3

On page load, create an array with the initial value of each select box indexed by name:

var select_values = [];

$(document).ready(function() {
    $("select").each(function() {
        select_values[$(this).attr('name')] = $(this).val();
    });
});

later when you need to check if a value has changed:

function has_select_changed(name) {
    return $("select[name="+name+"]").val() != select_values[name];
}

Answer 4

That's not too hard at all. This will keep track of the value for each select on the page:

$(document).ready(function() {
    $("select").each(function() {
        var originalValue = $(this).val();

        $(this).change(function() {
            if ($(this).val() != originalValue)
                $(this).addClass('value-has-changed-since-page-loaded');
            else
                $(this).removeClass('value-has-changed-since-page-loaded');
        });
    });
});

This will apply a new class value-has-changed-since-page-loaded (which presumably you'd rename to something more relevant) to any select box whose value is different than it was when the page loaded.

You can exploit that class whenever it is you're interested in seeing that the value has changed.

Answer 5

First, a snippet:

$('select').each( 
  function(){ 
    if( this.options[ this.selectedIndex ].getAttribute('selected') === null ){
          alert( this.name +' has changed!') 
    }
});

Now the explanation:

Assuming selectElement is a reference to a <select /> elementYou can check which option is selected using

selectElement.selectedIndex

To get the <option /> element which is currently selected, use

selectElement.options[ selectElement.selectedIndex ]

Now when you know which option element is selected you can find out if this element has the selected='selected' attribute (as in the source code, it doesn't change - this is not the same as .selected propery of a DOM node, which is true for the currently selected option element and changes when the selection is changed)