sélectionnez l'événement de changement jquery-Questions et réponses frontales-php.cn

select change event jquery

Dans le développement Web, nous rencontrons souvent le besoin de surveiller les modifications dans les sélections de la liste déroulante en temps réel. Lorsque l'utilisateur sélectionne une option dans la liste déroulante, effectuez le traitement correspondant en fonction de l'option sélectionnée. . Afin de réaliser cette fonction, nous pouvons utiliser l'événement change() de jquery pour répondre à la situation où la liste déroulante est modifiée.

Utilisation de l'événement change() Nous devons d'abord utiliser la balise en HTML pour créer une liste déroulante et y ajouter des options. Utilisez ensuite jquery pour capturer l'événement change() de cette liste déroulante. La fonction de gestion des événements change() peut obtenir la valeur de l'option actuellement sélectionnée et effectuer les opérations correspondantes. Voici un exemple simple :

Apple Orange Banana Peach

$("#fruit").change(function(){ var selectedFruit = $(this).val(); alert("You selected " + selectedFruit); }); Copier après la connexion Dans l'exemple ci-dessus, #fruit est utilisé pour obtenir l'élément select et la méthode change() est utilisée pour lier le gestionnaire d'événements. Lorsque l'utilisateur sélectionne une option dans l'élément select, nous obtiendrons la valeur de l'option et l'afficherons dans la fenêtre contextuelle.

Opération basée sur l'option sélectionnée Opération basée sur l'option sélectionnée, chaque valeur d'option peut être traitée séparément au lieu d'utiliser une instruction switch. Dans l'exemple suivant, nous utilisons une instruction if pour définir la couleur d'arrière-plan de la page sur une couleur différente en fonction des options sélectionnées.

Red Green Blue

$("#color").change(function(){ var selectedColor = $(this).val(); if(selectedColor == 'red'){ $('body').css('background-color', 'red'); } else if(selectedColor == 'green'){ $('body').css('background-color', 'green'); } else if(selectedColor == 'blue'){ $('body').css('background-color', 'blue'); } }); Copier après la connexion Dans cet exemple, nous continuons à utiliser la méthode change() pour lier un événement et utilisons l'instruction if dans la fonction de gestionnaire d'événements pour définir la couleur d'arrière-plan de la page sur différentes couleurs en fonction des éléments sélectionnés.

Traitement asynchrone Si vous avez besoin d'obtenir des données du serveur, vous pouvez utiliser ajax pour demander de manière asynchrone et traiter les données une fois les données renvoyées. L'exemple ci-dessous montre comment utiliser les requêtes ajax pour obtenir des données.

Apple Orange Banana Peach

$("#fruit").change(function(){ var selectedFruit = $(this).val(); $.ajax({ url: 'getFruitInfo.php', data: {fruit: selectedFruit}, success: function(data){ $("#output").html(data); } }); }); Copier après la connexion Dans cet exemple, nous utilisons toujours la méthode change() pour lier un événement et utilisons la requête ajax pour obtenir les informations sur les fruits sélectionnés auprès du serveur. La requête sera envoyée sur la page getFruitInfo.php avec un paramètre nommé "fruit", dont la valeur est le fruit actuellement sélectionné. Dans la requête ajax, une fonction de rappel de réussite est également définie, qui affiche les données renvoyées dans le div avec l'identifiant « sortie ».

Résumé

L'utilisation de l'événement change() peut simplement obtenir la valeur de l'élément sélectionné par l'utilisateur dans la liste déroulante. Et effectuez différentes opérations en fonction des options sélectionnées. Utilisez des requêtes ajax pour obtenir des données et traitez-les de manière asynchrone pour obtenir des fonctionnalités plus complètes. L'utilisation de l'événement change() en JavaScript est une technique très utile qui peut aider les développeurs à mettre en œuvre des applications Web conviviales.