Comment remplir l’option de sélection de liste déroulante à l’aide de jQuery
Dans ce tutoriel, nous allons créer un Comment remplir l’option de sélection de liste déroulante à l’aide de jQuery. L’objectif de ce didacticiel est de vous permettre de remplir dynamiquement l’option de sélection. Cela couvrira toutes les fonctions de base qui rempliront la liste déroulante. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.
Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système si vous souhaitez remplir des données dans n’importe quel formulaire de saisie. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Remplir l’option de sélection. Faisons donc le codage.
Avant de commencer :
Vous devez d’abord télécharger le jQuery brancher.
Voici le lien pour le jQuery que j’ai utilisé dans ce tutoriel https://jquery.com/.
Enfin, voici le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.
Création de l’interface
C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que l’interface des formulaires html. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.
<!DOCTYPE html>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="css/select2.css" /> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="container-fluid"> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/>
Création d’une fonction JavaScript
C’est là que se trouve la fonction principale de l’application. Ce code vous permettra de remplir le tableau de données dans l’option de sélection. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.
$(document).ready(function() {
var movies = ["Avengers: Endgame", "Avengers: Infinity War", "Batman", "Black Panther", "Green Lantern", "Iron Man 3", "Superman"];
for (var i = ; i < movies.length; i++) {
$('#movie_list').append('<option value="' + movies[i] + '">' + movies[i] + '</option>');
}
$("#submit").on('click', function(){
var movie = $('#movie_list').val();
if(movie === ""){
alert("Please select something first");
}else{
alert("You choose: "+movie);
}
});
});
Dans le code donné, nous appelons d’abord l’événement de base jQuery ready pour signaler que le DOM de la page est maintenant prêt à être utilisé. Ensuite, nous allons d’abord créer une variable qui contiendra les données que nous ajouterons plus tard.
Afin de remplir les données dans la balise select, nous utiliserons la boucle for pour parcourir toutes les données en une seule fois. Ensuite, nous utiliserons la fonction d’ajout, cette fonction ajoutera les données que vous serez insérées à un identifiant de balise html cible.
Sortir:
Les Comment remplir l’option de sélection de liste déroulante à l’aide de jQuery le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.
Voilà, nous avons créé avec succès Comment remplir l’option de sélection de liste déroulante à l’aide de jQuery. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !
Plus de tutoriels pour le langage JavaScript
Tutoriels JavaScript