sélectionnez l'événement de changement jquery

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.

1. Utilisation de l'événement change()

Nous devons d'abord utiliser la balise 221f08282418e2996498697df914ce4e 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 :

<select id="fruit">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="peach">Peach</option>
</select>

<script>
$("#fruit").change(function(){
  var selectedFruit = $(this).val();
  alert("You selected " + selectedFruit);
});
</script>

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.

2. 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.

<select id="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<script>
$("#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');
  }
});
</script>

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.

3. 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.

<select id="fruit">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="peach">Peach</option>
</select>

<div id="output"></div>

<script>
$("#fruit").change(function(){
  var selectedFruit = $(this).val();
  $.ajax({
    url: 'getFruitInfo.php',
    data: {fruit: selectedFruit},
    success: function(data){
      $("#output").html(data);
    }
  });
});
</script>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!