Maison > Problème commun > Comment lier un événement de changement de sélection dans jquery

Comment lier un événement de changement de sélection dans jquery

尊渡假赌尊渡假赌尊渡假赌
Libérer: 2023-06-09 16:02:07
original
3346 Les gens l'ont consulté

Comment lier l'événement select change avec jquery : 1. Créez un exemple de fichier jQuery ; 2. Utilisez le sélecteur "$('select')" pour sélectionner tous les éléments select, puis liez l'événement change avec le "on( )" ; 3. . Une fois l'événement survenu, la fonction de rappel utilise les méthodes ".val()" et ".find(':selected')" pour obtenir la valeur et le texte de l'élément sélectionné ; 4. La console affiche le contenu sélectionné ou l'affiche sur la page Sortez simplement.

Comment lier un événement de changement de sélection dans jquery

Le système d'exploitation de ce tutoriel : système Windows 10, jQuery version 3.6.0, ordinateur Dell G3.

En utilisant jQuery, vous pouvez simplement lier l'événement change pour écouter les modifications dans l'élément select.

Implémenté à l'aide du code suivant :

$(document).ready(function() {
  // 选择 select 元素,并绑定 change 事件
  $('select').on('change', function() {
    // 获取选中项的值和文本
    var selectedValue = $(this).val();
    var selectedText = $(this).find(':selected').text();
    
    // 在控制台输出选中项的值和文本
    console.log('选中了:' + selectedValue + ',' + selectedText);
    
    // 如果需要在页面上显示选中项的值或文本,可以使用以下代码
    // $('#result').text(selectedValue); 
    // $('#result').text(selectedText);
  });
});
Copier après la connexion

Le sélecteur $('select') dans le code ci-dessus est utilisé pour sélectionner tous les éléments select, puis la méthode on() leur lie l'événement change. La fonction de rappel sera déclenchée lorsque l'utilisateur sélectionne une option dans l'élément select.

La fonction de rappel obtient d'abord la valeur et le texte de l'élément sélectionné, ici les méthodes .val() et .find(':selected') sont utilisées. Le contenu sélectionné peut ensuite être sorti sur la console ou affiché sur la page (en modifiant le .text() de l'élément correspondant).

Si vous souhaitez opérer sur un élément de sélection spécifique dans la page, sélectionnez en fonction d'un sélecteur tel que son ID ou son nom de classe. Par exemple : $('#my-select') ou $('.my-select').

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal