Comment ajouter une option dans la liste de sélection à l’aide de JavaScript

Posté Par: Windows2022tutosur: décembre 09, 2022Dans: TechPas De Commentaires

Comment ajouter une option dans la liste de sélection à l’aide de JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment ajouter une option dans la liste de sélection à l’aide de JavaScript. Ce tutoriel a pour but d’apprendre à ajouter de nouvelles options dans la balise html select. Cela couvrira toutes les fonctions importantes qui fournissent la base de l’ajout d’une option. 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 type de système si vous souhaitez en ajouter un autre dans une balise de sélection de manière dynamique. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Ajout d’une option dans Select Tag. Faisons donc le codage.

Avant de commencer :

Ceci est 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 affichera un élément et un bouton de sélection de formulaire. 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"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Add Option in Selection List using JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
				<input type="text" id="option" class="form-control"/>
				<button type="button" class="btn btn-success btn-block" onclick="addSelectList()"><span class="glyphicon glyphicon-plus"></span> Add</button>
				<select id="select" class="form-control">

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code vous permettra d’ajouter dynamiquement de nouvelles options dans la balise de liste 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.

function addSelectList(){
	let select = document.getElementById('select');
	let option = document.getElementById('option');
 
	if(option.value == ""){
		alert("Required Field!");
	}else{
		let newOption = document.createElement("option");
		let newOptionValue = document.createTextNode(option.value);
 
		newOption.appendChild(newOptionValue);
		select.insertBefore(newOption, select.lastChildNode);
 
		option.value = "";
		select.value = "";
	}
}

Dans le code, nous allons créer une méthode appelée addSelectList(), ce sera la seule fonction dont nous aurons besoin pour ajouter des options. Dans la première ligne de code à l’intérieur de la méthode, nous allons créer deux variables, ces deux ne lieront qu’un élément de sélection. Ensuite, nous ajouterons une instruction conditionnelle qui vous empêchera uniquement d’ajouter une valeur nulle, sinon elle continuera à exécuter le code.

Dans les deux prochains codes, nous créons une variable qui créera un nouvel élément appelé nouvelleOption, cela agira sur le nœud parent. Ensuite, nous créons une variable qui définira la valeur de l’élément enfant appelé newOptionValue. Dans ces deux variables, nous ajoutons simplement la valeur de l’élément enfant dans l’élément parent afin d’ajouter une nouvelle option dans la balise select.

Production:

La Comment ajouter une option dans la liste de sélection à l’aide de JavaScript 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 ajouter une option dans la liste de sélection à l’aide de JavaScript. 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

Télécharger ici