événement de changement de liste déroulante jquery

Événement de changement de liste déroulante jQuery est une technologie largement utilisée dans le développement Web. Dans la conception Web, il est souvent nécessaire d’utiliser des listes déroulantes pour sélectionner différentes options. Vous pouvez utiliser jQuery pour déclencher les événements correspondants lorsque les options de la liste déroulante changent, afin de mettre à jour ou de modifier le contenu de la page Web en temps réel. Ce qui suit explique comment utiliser jQuery pour implémenter des événements de modification de liste déroulante.

1. Opérations de base

Dans jQuery, les événements de changement de liste déroulante sont principalement implémentés à l'aide de la méthode change(). Cette méthode se déclenche lorsque l'option de la liste déroulante change et peut effectuer certaines opérations, comme mettre à jour le contenu de la page Web, afficher ou masquer certains éléments, etc. Ce qui suit est un exemple de programme simple qui montre comment utiliser la méthode change() :

<select id="selectBox">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<p id="result"></p>

<script>
  $('#selectBox').change(function() {
    var selectedValue = $('#selectBox option:selected').val();
    $('#result').text('您选择的是：' + selectedValue);
  });
</script>

Dans le programme ci-dessus, une liste déroulante est d'abord créée avec trois options. Ensuite, utilisez la méthode change() de jQuery pour écouter l'événement de changement d'option de la liste déroulante. Lorsque l'option change, obtenez la valeur actuellement sélectionnée et affichez-la dans le paragraphe avec l'identifiant du résultat.

2. Liaison d'événements

En plus d'utiliser directement la méthode change() pour écouter l'événement de changement de la liste déroulante, vous pouvez également utiliser la méthode bind() ou on() pour lier l'événement. Ces deux méthodes doivent spécifier le type d'événement et la fonction de rappel lors de leur utilisation.

$('#selectBox').bind('change', function() {
  var selectedValue = $('#selectBox option:selected').val();
  $('#result').text('您选择的是：' + selectedValue);
});
//或者
$('#selectBox').on('change', function() {
  var selectedValue = $('#selectBox option:selected').val();
  $('#result').text('您选择的是：' + selectedValue);
});

3. Utiliser la délégation

S'il y a plusieurs listes déroulantes sur la page et que vous devez y lier le même événement, vous pouvez utiliser la délégation d'événement. La délégation d'événement fait référence à la liaison d'un événement à un élément ancêtre Lorsqu'un élément enfant sous l'élément déclenche l'événement, le gestionnaire d'événements est appelé. Cette méthode peut réduire considérablement le nombre de liaisons d'événements et améliorer les performances des pages Web.

<div id="selectBoxes">
  <select class="selectBox">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <select class="selectBox">
    <option value="4">选项4</option>
    <option value="5">选项5</option>
    <option value="6">选项6</option>
  </select>
</div>

<p class="result"></p>

<script>
  $('#selectBoxes').on('change', '.selectBox', function() {
    var selectedValue = $(this).find('option:selected').val();
    $(this).next('.result').text('您选择的是：' + selectedValue);
  });
</script>

Dans le code ci-dessus, un élément ancêtre selectBoxes est d'abord créé et deux listes déroulantes y sont placées. Ensuite, utilisez la méthode on() sur l'élément pour écouter l'événement change et déléguer l'événement à l'élément enfant dont .class est selectBox. Lorsque l'option de la liste déroulante change, obtenez la valeur actuellement sélectionnée et affichez-la dans l'élément frère suivant.result.

Résumé :

L'événement de changement de liste déroulante jQuery est l'une des technologies couramment utilisées dans le développement Web. Grâce à cette technologie, vous pouvez mettre à jour ou modifier le contenu de la page Web en temps réel lorsque les options changent. Les méthodes d'implémentation spécifiques incluent l'utilisation directe de la méthode change(), l'utilisation de la méthode bind() ou on() pour lier des événements et l'utilisation de la délégation d'événements. Pour les pages complexes, il est recommandé d'utiliser la technologie de délégation d'événements pour améliorer les performances.

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!