Maison > Article > interface Web > Comment implémenter la liste déroulante de nationalité dans jquery

Comment implémenter la liste déroulante de nationalité dans jquery

PHPzoriginal: 2023-04-17 15:00:33876parcourir

JQuery est une bibliothèque JavaScript populaire qui permet aux développeurs Web de développer diverses applications Web plus rapidement et plus facilement. La zone déroulante est un élément de formulaire courant qui peut être utilisé pour afficher les options dans une liste. Dans cet article, nous présenterons comment utiliser JQuery pour implémenter une liste déroulante de nationalité.

Étape 1 : Créer une page HTML

Tout d'abord, nous devons créer une page HTML pour contenir notre liste déroulante. Sur cette page, nous devons ajouter un élément de sélection et y ajouter notre option de nationalité.

<!DOCTYPE html>
<html>
<head>
  <title>JQuery国籍选择下拉框</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <label for="country">选择你的国家:</label>
  <select id="country">
    <option value="">请选择</option>
    <option value="China">中国</option>
    <option value="United States">美国</option>
    <option value="United Kingdom">英国</option>
    <option value="Japan">日本</option>
  </select>
</body>
</html>

Étape 2 : Gérer l'événement de changement

Dans cette étape, nous utiliserons JQuery pour gérer l'événement de changement de l'élément select. Dans ce cas, nous obtiendrons la valeur de la nationalité sélectionnée et exécuterons tout code que nous souhaitons exécuter après avoir sélectionné la nationalité.

Nous devons d'abord sélectionner notre élément de sélection et y ajouter un écouteur d'événement de changement. Une fois la valeur de l'élément select modifiée, le code correspondant sera exécuté.

Vous trouverez ci-dessous le code que nous avons ajouté.

$(document).ready(function() {
  $('#country').change(function() {
    var selected = $(this).val();
    console.log('您选择的国家是：' + selected);
    // 在这里添加任何其他代码
  });
});

Nous utilisons d'abord la fonction $(document).ready() pour nous assurer que la page est chargée. Nous sélectionnons ensuite notre élément select (ici l'élément avec l'identifiant "country") et lui ajoutons un écouteur d'événement à l'aide de la fonction change().

Dans l'écouteur d'événement, nous utilisons $(this).val() pour obtenir la valeur de la nationalité sélectionnée. $(this) est un pointeur vers notre élément select, et la fonction .val() est utilisée pour obtenir sa valeur. Nous utilisons également la fonction console.log() pour imprimer la valeur de la nationalité sélectionnée.

Étape 3 : Remplissez la liste déroulante Nationalité

Dans cette étape, nous ajouterons le code requis pour remplir notre liste déroulante Nationalité. Nous utiliserons JQuery pour ajouter dynamiquement nos options de nationalité à la liste déroulante.

Voici notre code complet.

<!DOCTYPE html>
<html>
<head>
  <title>JQuery国籍选择下拉框</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {

      // 所有国家的数组
      var countries = ['China', 'United States', 'United Kingdom', 'Japan'];

      // 循环遍历国家数组创建选项
      $.each(countries, function(index, value) {
        $('#country').append($('<option>').text(value).attr('value', value));
      });

      // 处理change事件
      $('#country').change(function() {
        var selected = $(this).val();
        console.log('您选择的国家是：' + selected);
        // 在这里添加任何其他代码
      });

    });
  </script>
</head>
<body>
  <label for="country">选择你的国家:</label>
  <select id="country">
    <option value="">请选择</option>
  </select>
</body>
</html>

Dans cet exemple, nous créons d'abord un tableau de chaînes contenant tous les pays. Nous utilisons ensuite la fonction $.each de JQuery pour parcourir ce tableau et créer un nouvel élément d'options à ajouter à notre liste déroulante.

Nous utilisons la fonction $('#country').append() pour ajouter de nouveaux éléments d'option. Dans cette fonction, nous utilisons $('

Enfin, nous lions tout le code ci-dessus dans la fonction $(document).ready() pour garantir que le document a été chargé et que le code JS peut accéder aux éléments DOM.

Résumé

Cet article explique comment utiliser JQuery pour implémenter une liste déroulante de nationalité. Nous avons d’abord créé une page HTML de base et y avons ajouté un élément de sélection. Nous complétons ensuite notre liste déroulante en ajoutant dynamiquement des options de nationalité et en gérant l'événement de changement de l'élément sélectionné. En utilisant JQuery, nous pouvons facilement créer notre propre liste déroulante et ajouter des options de manière dynamique.

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!

JavaScript jquery html select 字符串指针 append JS console 事件 dom this

Déclaration：

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

Article précédent：Quelques conseils et suggestions pour l'organisation du front-end webArticle suivant：Quelques conseils et suggestions pour l'organisation du front-end web

Articles Liés

Voir plus