Liste déroulante qui s'incrémente

Bonjour à tous,
J'aimerai créer une liste déroulante qui s'incrémente de 1 à chaque clique sur un bouton.
exemple :

Code:

1
2
3
4
 
<select><option>1 <option>2 <option selected>3</select><!-- avant le clique -->
 
<select><option>1 <option>2 <option>3 <option selected>4</select><!-- après le clique -->

Avec une infintée d'incrémentation possible, et en gardant à chaque clique les anciennes valeurs dans la liste.

Voilà mon code au stade actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	jQuery('img#bt_ajout').click(function() { 											/*Function Clique sur bouton ajout dont l'ID(#) est bt_ajout*/
 
			var currentNumberQuest = jQuery('input#currentNumberQuest').val();			/*déclaration d'une variable currentNumberQuest à laquelle on attribue la valeure de l'ID #currentNumberQuest*/
 
			currentNumberQuest++;		
			var cpt = jQuery('input#cpt').val();		
			cpt++;																		/*incrémentation de la var*/
 
			$('#cpt').val(cpt);	
			$('#currentNumberQuest').val(currentNumberQuest);							/*On donne à l'ID currentNumberQuest la valeure de la variable*/
 
			alert(cpt);
 
			/*en dessous on déclare une variable nveau bloc*/
 
			var newLine = "<div id='qst_"+currentNumberQuest+"'><table width=\"100%\"><input type='hidden' id=''> <tr id=\"ligne_separe"+currentNumberQuest+"\" style=\"background-color:#cccccc;\"\"><td></td><td></td><td></td><td></td></tr><tr id=\"blocQuestion"+currentNumberQuest+"\"><td style=\"width:20%;\">Qestion n°"+currentNumberQuest+" : </td><td colspan=\"2\" style=\"width:35%;\" ><input size=\"65\" type=\"text\" name=\"question"+currentNumberQuest+"\" id=\"\" value=\"\" ></td><td style=\"width:45%;\">";
			newLine += "<img style=\"cursor:pointer;\"  src=\"<?php echo $sf_request->getRelativeUrlRoot() ?>/images/suppr.jpg\" onclick=\"deleteRow("+currentNumberQuest+")\" /></td></tr>";
			newLine += "<tr id=\"blocIndice"+currentNumberQuest+"\"><td >Indice : </td><td colspan=\"2\"><input class=\"inputTextIndice\" name=\"indice"+currentNumberQuest+"\" size=\"65\" type=\"text\" value=\"http://\"></td><td></td></tr>";
			newLine +=	"<tr id=\"blocRang"+currentNumberQuest+"\"><td>type : </td><td><SELECT style=\"width:220px;\" class=\"selectType\" onChange=\"blocreponse("+currentNumberQuest+")\" id=\"ldselect"+currentNumberQuest+"\" NAME=\"ListeType"+currentNumberQuest+"\" SIZE=1 \"><OPTION select=\"selected\" value=\"0\">Sélectionnez un type<OPTION value=\"1\">Choix unique <OPTION value=\"2\">Choix multiple <OPTION value=\"3\">Texte libre</SELECT>";
			newLine += "</FORM></td><td align=\"right\"> Rang :<SELECT style=\"width:120px;\" id='ldrang' name=\"rang"+currentNumberQuest+"\" size=\"1\"><OPTION>1<OPTION selected>"+cpt+"</SELECT></td><td></td></tr></div>";
 
			jQuery('div#bloc_qr').append(newLine); 										/*Que lon affiche apres l'élément ki a pr iD #bloc_qr*/
 
																						// ajout d'évènement sur les éléments générés

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript"> var i = 1;
  function increment() {
    var elem = document.getElementById("increment");
    i++;
    var monOption = document.createElement("option");
    var valeur = document.createTextNode(i);
    monOption.setAttribute("value", i);
    monOption.appendChild(valeur);
    elem.appendChild(monOption);
  }
</script>
<select id="increment">
  <option>1</option>
</select>
<input type="button" onclick="increment();" value="Incrémenter"/>

Le truc c'est que je travaille avec des class, et non des ID pour le select(vu que je répète cette liste Déroulante à chaque clique).

L'incrémentation fonctionne bien mais je me retrouve avec le même problème lorsque j'ajoute plusieurs autre liste déroulante. (problème: Seul le 1er Select affiche le bon nombre d'option), à chaque clique ça doit ajouter un nouvel option dans toutes les listes déroulantes.

Je vais chercher ça cette après midi, je posterai mon résultats dans l'aprem. Merci quand même :D.

Il suffit de récupérer l'ensemble de tes select... (au pire tu testes par la suite que la class est celle que tu veux)

Code:

document.getElementsByTagName("SELECT");