TUTOS.EU

Combobox : Ajouter un élément

Ajouter une valeur à une combobox en JavaScript

Le code

<HTML>

	<HEAD>
		<style>
			.sectionArticle{
				margin: 10px;
			}
			
			.MyButton {
				margin: 2px 0;
				width:155px;
			}
		</style>
	</HEAD>

	<BODY>

		<SCRIPT TYPE="text/javascript">

			function recupValeurElement(IdElement)
			{
				if (document.getElementById)
				{
					return document.getElementById(IdElement);
				}
				else if (document.all)
				{
					return document.all[IdElement];
				}
			}

			function ButtAjoutEnDernier($IdElementSource){

				var TxtElement = recupValeurElement("TxtFenetreSaisie");
				AjouterElement($IdElementSource,TxtElement.value,TxtElement.value);

			}			

			function ButtAjoutEnPremier($IdElementSource){

				var TxtElement = recupValeurElement("TxtFenetreSaisie");
				AjouterElementEnPremier($IdElementSource,TxtElement.value,TxtElement.value);

			}

			function ButtAjoutAvant($IdElementSource){

				var TxtElement = recupValeurElement("TxtFenetreSaisie");
				AjouterElementAvant($IdElementSource,TxtElement.value,TxtElement.value);

			}			

			function AjouterElement($IdElementSource,TextAAjouter,ValueAAjouter){

				MaListe = recupValeurElement($IdElementSource);

				var ElemAAjouter = document.createElement('option');
				ElemAAjouter.text = TextAAjouter;
				ElemAAjouter.value = ValueAAjouter;

				try {
					MaListe.add(ElemAAjouter, null); // standards compliant; doesn't work in IE
				}
				catch(ex) {
					MaListe.add(ElemAAjouter); // IE only
				}

			}

			function AjouterElementEnPremier($IdElementSource,TextAAjouter,ValueAAjouter)
			{
				MaListe = recupValeurElement($IdElementSource);
				
				if (MaListe.selectedIndex >= 0) {
					var ElemAAjouter = document.createElement('option');
					ElemAAjouter.text = TextAAjouter;
					ElemAAjouter.value = ValueAAjouter;
					var elOptOld = MaListe.options[0];  
					try {
						MaListe.add(ElemAAjouter, elOptOld); // standards compliant; doesn't work in IE
					}
					catch(ex) {
						MaListe.add(ElemAAjouter, MaListe.selectedIndex); // IE only
					}
				}
			}			
			
			function AjouterElementAvant($IdElementSource,TextAAjouter,ValueAAjouter)
			{
				MaListe = recupValeurElement($IdElementSource);
				
				if (MaListe.selectedIndex >= 0) {
					var ElemAAjouter = document.createElement('option');
					ElemAAjouter.text = TextAAjouter;
					ElemAAjouter.value = ValueAAjouter;
					var elOptOld = MaListe.options[MaListe.selectedIndex];  
					try {
						MaListe.add(ElemAAjouter, elOptOld); // standards compliant; doesn't work in IE
					}
					catch(ex) {
						MaListe.add(ElemAAjouter, MaListe.selectedIndex); // IE only
					}
				}
			}			
			
			function SupprimerElement($IdElementSource)
			{
			
				MaListe = recupValeurElement($IdElementSource);

				var Compteur;
				
				for (Compteur = MaListe.length - 1; Compteur>=0; Compteur--) {
					if (MaListe.options[Compteur].selected) {
						MaListe.remove(Compteur);
						break;
					}
				}
			}			
			
		</SCRIPT>	

		<div id="sectionArticle" class="sectionArticle">
			<input type="text" id="TxtFenetreSaisie"></INPUT><br />
			<INPUT type="BUTTON" class="MyButton" value="Ajouter en dernier"  ONCLICK="ButtAjoutEnDernier('Liste01')"><br />
			<INPUT type="BUTTON" class="MyButton" value="Ajouter en premier"  ONCLICK="ButtAjoutEnPremier('Liste01','NouvelleValeur','NouvelleValeur')"><br />
			<INPUT type="BUTTON" class="MyButton" value="Ajouter avant sélection"  ONCLICK="ButtAjoutAvant('Liste01','NouvelleValeur','NouvelleValeur')"><br />
			<INPUT type="BUTTON" class="MyButton" value="Supprimer sélection"  ONCLICK="SupprimerElement('Liste01')"><br />
			
			<Select Name="Liste01" ID="Liste01">
				<Option Selected></Option>
				<Option Value="Entree01">Première entrée</Option>
				<Option Value="Entree02">Secondre entrée</Option>
			</Select></TD>	
		</div>

	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

2