Utilisez jQuery pour implémenter la liaison d'événement de changement de valeur des éléments sélectionnés-js tutoriel-php.cn

Utilisez jQuery pour implémenter la liaison d'événement de changement de valeur des éléments sélectionnés

王林

Libérer： 2024-02-24 08:51:06

original

501 Les gens l'ont consulté

Utilisez jQuery pour implémenter la liaison dévénement de changement de valeur des éléments sélectionnés

jQuery est une bibliothèque JavaScript largement utilisée pour simplifier les opérations DOM, la gestion des événements, les effets d'animation et d'autres opérations sur les pages Web. Dans le développement Web, il est souvent nécessaire de lier des événements à des éléments de page, et la liaison des événements de changement d'option de sélection est l'une des exigences courantes. Cet article explique comment utiliser jQuery pour lier des événements de changement d'option de sélection et fournit des exemples de code spécifiques.

1. Présentez la bibliothèque jQuery

Tout d'abord, introduisez la bibliothèque jQuery dans la balise

du document HTML, qui peut être introduite via le lien CDN comme suit :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Copier après la connexion

2. sélectionnez un élément dans le document et un élément utilisé pour afficher les résultats de la sélection, par exemple :

<select id="selectOptions">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
</select>

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

Copier après la connexion

3. Événement de liaison jQuery

Ensuite, utilisez jQuery pour lier l'événement de changement d'option de sélection et obtenez la valeur de l'élément sélectionné lorsque il change et l'affiche sur la page. L'exemple de code est le suivant :

$(document).ready(function(){
    $('#selectOptions').change(function(){
        var selectedOption = $(this).val();
        $('#result').text('您选择了：' + selectedOption);
    });
});

Copier après la connexion

La fonction du code ci-dessus est d'obtenir la valeur de l'élément sélectionné et de l'afficher dans l'élément avec l'identifiant du résultat lorsque l'option de sélection change.

4. Exemple de code complet

Intégrez le code ci-dessus pour former un fichier HTML complet comme suit :




    
    jQuery绑定select选项改变事件
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    

    

    <script>
        $(document).ready(function(){
            $('#selectOptions').change(function(){
                var selectedOption = $(this).val();
                $('#result').text('您选择了：' + selectedOption);
            });
        });
    </script>

Copier après la connexion

Conclusion