Comment intercepter l'événement de changement de < sélectionner > avec jQuery?
-
05-07-2019 - |
Question
<select id="target">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
</select>
Dites, je souhaite effectuer certains traitements en fonction de la valeur sélectionnée.
La solution
$('#target').change( function() {
$(this).find(":selected").each(function () {
console.log( $(this).val() );
});
});
Autres conseils
$("#target").change( function() {
alert($("#target option:selected").val());
});
Vous devrez peut-être également en tenir compte si la personne ne modifie pas l'option, mais clique simplement sur le menu déroulant et sélectionne le même élément:
$("#target option").click( function() {
alert($("#target option:selected").val());
});
$("#target").change( function() {
var selectedOption = $("#target option:selected");
var selectedValue = selectedOption.val(); // gets the selected value
var selectedText = selectedOption.text(); // gets the selected text
});
La réponse acceptée convient, mais ne saisissez pas les modifications effectuées en appuyant sur la touche (touches fléchées ou alphanumériques).
C’est une meilleure approche:
$('#target').bind("change keyup",function() {
$(this).find(":selected").each(function () {
// do something amazing here
});
});
Vous pouvez obtenir la valeur et le texte sélectionnés simplement par:
$("#target").change(function() {
var selectedValue = $(this).val(),
selectedText = $('option:selected', this).text();
// ...
});
À l’aide de la fonction flèche, il peut être:
$('#target').change((e) =>{
console.log(e.currentTarget.value);
console.log(e.currentTarget.textContent);
});
Remplacement de this
par event.currentTarget
.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow