En utilisant JavaScript ou jQuery, comment vérifier si la boîte de sélection correspond à la valeur d'origine?

Question

Vous vous demandez simplement s'il existe un moyen de vérifier si la valeur d'une liste déroulante de sélection correspond à la valeur d'origine au moment du chargement de la page (lorsque la valeur a été définie à l'aide de selected = "yes")?

Je suppose que je pourrais utiliser PHP pour créer les valeurs originales en tant que variables JavaScript et les cocher, mais il y a quelques cases de sélection et j'essaie de garder le code le plus concis possible!

Answer 1

C'est pas trop dur du tout. Cela permet de garder une trace de la valeur pour chaque select sur la 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'); 
     }); 
    }); 
}); 

Cela appliquera une nouvelle classe value-has-changed-since-page-loaded (que vous auriez sans doute quelque chose de plus à renommer pertinent) à une zone de sélection dont la valeur est différente de celle était quand la page chargée.

Vous pouvez exploiter cette classe chaque fois que vous souhaitez voir que la valeur a changé.

Answer 2

$(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. Vous devez utiliser selected="selected" et non selected="yes".

Answer 3

Sur chargement de la page, créer un tableau avec la valeur initiale de chaque zone de sélection indexé par le nom:

var select_values = []; 

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

plus tard, quand vous devez vérifier si une valeur a changé:

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

Answer 4

D'abord, un extrait:

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

Maintenant, l'explication:

selectElement En supposant est une référence à un < sélectionner/> elementYou peut vérifier l'option est sélectionnée à l'aide

selectElement.selectedIndex 

Pour obtenir l'option </> actuellement sélectionnée, utilisez

selectElement.options[ selectElement.selectedIndex ] 

Maintenant, quand vous savez quel élément l'option est sélectionnée, vous pouvez savoir si cet élément a sélectionné = « sélectionné » attribut (comme dans le code source, il ne change pas - ce n'est pas la même chose que .selected propery d'un noeud DOM, ce qui est vrai pour l'élément option actuellement sélectionné et change quand la sélection est changée)