Discussion :

[EddyM4P]

Bonjour à tous, je suis en train de réaliser un outil de location sur un site de vente. J'ai fais un <select> pour sélectionner un produit, puis un bouton "+" qui duplique cet élément pour ajouter une nouvelle sélection. Je voudrais que quand on change la sélection, un champ apparaisse pour définir la quantité.

Je pensais utiliser ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('selectId').addEventListener("change", displayQuantity);

Mais le problème c'est que mon bouton "+" duplique aussi l'id du select, donc impossible de faire un événement ciblé sur un seul select

Voici mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="choice-tbi-ent">
	<p id="select-tbi-ent"><select>
		<option disabled selected>Sélectionnez un produit</option>
		<option>SMART Board 885 MW521</option>
		<option>SMART Board 885ix2</option>
	</select></p>
</div>
<button id="addTBI-ent" class="ajouter" onclick="duplicateSelect(event);">+</button>

Et le javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function duplicateSelect(event) {
	var event = event;
	var elem = event.currentTarget;
	if (elem.id == "addTBI-ent") {
		var firstSelect = document.getElementById("select-tbi-ent");
		var newSelect = firstSelect.cloneNode(true);
		document.getElementById('choice-tbi-ent').appendChild(newSelect);
	}
}

Merci d'avance à ceux qui m'aideront à trouver une solution

[melka one]

jour

supprime l'id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newSelect.removeAttribute('id');

[EddyM4P]

Ok je supprime l'id mais après comment appeler la fonction displayQuantity? Pour faire apparaitre un champ "quantité" quand on sélectionne une valeur

[melka one]

en lui collant un evenement onchange

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newSelect.addEventListener("change", displayQuantity);

quand on clone un element on se rerouve avec un nouveau element il est traité de la meme maniere qu'un element de la page