Niveau
..........
En rapport...

Ajouter une valeur a une select box

Parfois, il peu arrivé que vous aillez besoin de proposer une liste à l'utilisateur tout en lui laissant la possibilité d'ajouter des valeurs dans la liste.
C'est pourquoi je vous propose cet exemple qui permet d'obtenir une select extensible facilement.

Démonstration


exemple en popup

Code

javascript
	function addNewOption(obj) {
		if (obj.value=="addNewOption") {
			var p=prompt('Entrez la nouvelle valeur','');
			if ((p!="") && (p!=null)) {
				var v=obj.options[obj.options.length-1].value;
				var t=obj.options[obj.options.length-1].innerHTML;
				obj.options.length=obj.options.length-1;
				obj.options[obj.options.length] = new Option(p,p);
				obj.options[obj.options.length] = new Option(t,v);
				obj.options[obj.options.length-2].selected=true;
			} else
				obj.options[0].selected=true;
		}
	}
html4strict
	<form>
		<select onchange="addNewOption(this);">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="addNewOption">Ajouter une option</option>
		</select>
	</form>
Il est important d'avoir cette ligne en dernière position de votre selectbox :

html4strict
<option value="addNewOption">Ajouter une option</option>

La nouvelle ligne ajoutée à votre select à comme value la même chose que ce qui apparait à l'écran.
exemple :

html4strict
<option value="plop">plop</option>



16/03/2007 14:36 -

iDo –