Используя JavaScript или jQuery, как мне проверить, соответствует ли поле выбора исходному значению?

Question

Просто интересно, есть ли способ проверить, соответствует ли значение раскрывающегося списка выбора оригинальному значению во время загрузки страницы (когда значение было установлено с помощью selected = "yes")?

Полагаю, я мог бы использовать PHP для создания исходных значений в качестве переменных JavaScript и проверки их соответствия, но есть несколько полей выбора, и я стараюсь сделать код максимально кратким!

Answer 1

Это совсем не сложно. Это будет отслеживать значение для каждого select на странице:

$(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');
        });
    });
});

Это будет применять новый класс value-has-changed-since-page-loaded (который, по-видимому, вы переименовали бы в нечто более релевантное) для любого поля выбора, значение которого отличается от того, которое было при загрузке страницы.

Вы можете использовать этот класс всякий раз, когда вам интересно узнать, изменилось ли значение.

Answer 2

При загрузке страницы создайте массив с начальным значением каждого поля выбора, проиндексированного по имени:

var select_values = [];

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

позже, когда вам нужно проверить, изменилось ли значение:

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

Answer 3

$(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. Вы должны использовать selected="selected" не selected="yes".

Answer 4

Сначала фрагмент:

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

Теперь объяснение:

Предполагая, что selectElement является ссылкой на элемент

selectElement.selectedIndex

Чтобы получить элемент

, который выбран в данный момент, используйте

selectElement.options[ selectElement.selectedIndex ]

Теперь, когда вы знаете, какой элемент option выбран, вы можете узнать, имеет ли этот элемент атрибут selected = 'selected' (как в исходном коде, он не меняется - это не то же самое, что свойство .selected узел DOM, который является истинным для текущего выбранного параметра и изменяется при изменении выбора)