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

admin管理员组

文章数量:1318563

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!

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!

• javascript
• jquery

Share Improve this question Follow edited Jul 26, 2012 at 13:17 Teun Zengerink 4,39355 gold badges3232 silver badges3232 bronze badges asked Aug 11, 2009 at 17:07 stukerrstukerr 71633 gold badges1010 silver badges1919 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

$(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".

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];
}

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)

本文标签： Using JavaScript or jQueryhow do I check if select box matches original valueStack Overflow