Using JavaScript or jQuery, how do I check if select box matches original value?

javascript, jquery

Solution

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.

Problem

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!

Original source