Ajout dynamique champs select

09 nov. 2013, 01:08

Bonsoir à tous,

je souhaiterai ajouter dynamiquement des champs <option> (liste déroulante) en cliquant sur un lien..

J'ai essayé ça :

<script>
function create_champ(i) {

var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = ' <select name="fichier_'+i+'"></span>';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : '';


}
</script>

<select name="ligne_service_1" id="leschamps_4">
      <option value="<?php echo stripslashes($aff_donnee_client['civilite_ent']);?>"><?php echo stripslashes($aff_donnee_client['civilite_ent']);?></option>
      <option value="Madame">Assistance Technique (R&eacute;gie)</option>
      <option value="Monsieur">Infog&eacute;rance</option>
      <option value="Monsieur">PCS</option>
      <option value="Monsieur">H&eacute;bergement</option>
      <option value="Monsieur">Int&eacute;gration CPEP</option>
      <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
      <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
      <option value="Monsieur">Assistance MOA</option>
      <option value="Monsieur">Négoce</option>
      <option value="Monsieur">Renouvellement Maintenance</option>
    </select>
<span id="leschamps_4"><a href="javascript:create_champ(4)">Ajouter un champs</a></span>

Mais cela ne fonctionne pas...
Pouvez-vous m'aider?

Merci beaucoup.

09 nov. 2013, 13:45

Un bout de solution à adapter:

<script>
 function create_champ() {
//la fonction est effectivemlent appelée
 var i = 1;

 //document.getElementById('leschamps_'+i).innerHTML = ' <select name="fichier_'+i+'"></span>';
 //document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '

document.write(i);

 }
</script>

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
     </select> 
     
     
 <!-- Sens de :  <span id="leschamps_'+i2+'">?-->    
     <br />
//  l'événement onclick d'un bouton fonctionne correctement
 <button onclick ="create_champ()"> Ajouter un champ</button></p>

09 nov. 2013, 20:02

Perso j'aurais fait un truc comme ça (avec Jquery activé bien sûr):
[javascript]
function addOption(){
$('#leschamps_4').append('<option value="foo">Foo</option>');
}
[/javascript]

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
</select>

<br /><button onclick ="addOption()"> Ajouter un champ</button>

Cela rajoute un champs Option comme tu l'as demandé. Par contre, enregardant ton script, j'ai l'impression que tu veux rajouter un select à chaque fois et pas un option ?

09 nov. 2013, 22:55

Merci beaucoup pour vos réponses!
En effet je souhaite ajouter un champs supplémentaire à chaque fois que je clique sur le lien et avec l'option de paramétrer le nombre maximum d'ajout...

Merci par avance

10 nov. 2013, 00:09

je viens d'essayer les 2 scripts et malheureusement, ils ne fonctionnent pas...

Merci quand même.

10 nov. 2013, 09:15

Ce que j'ai envoyé fonctionne parfaitement : je l'ai testé avant de le poster.
Que ça ne fasse pas ce que tu,veux, c'est autre chose...
Il faut d'abord être certain que le script est activé et onctionnel.

10 nov. 2013, 09:20

Le code que je t'ai donné doit fonctionner pour peu que jquery soit appelé.

Si tu veux un trux dynamique tu peux faire ça côté javascript:

function addOption(){
var index = $('#leschamps_4 option').length + 1;
$('#leschamps_4').append('<option value="example' + index + '" selected="selected">Option #' + index + '</option>');
}

10 nov. 2013, 11:41

Mdr! En fait je n'ai pas active jquerry ! Car je ne sais pas trop comment faire...
Je vais chercher.

Merci,beaucoup pour ton aide

10 nov. 2013, 12:03

Insères ça dans le balise <head> de ton HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

et ça devrait suffire

10 nov. 2013, 18:49

Merci.
Je viens d'essayer mais lorsque je clique sur le bouton rien ne se passe...

10 nov. 2013, 18:52

Par contre lorsque j'utilise ça :
[javascript]function addOption(){
var index = $('#leschamps_4 option').length + 1;
$('#leschamps_4').append('<option value="example' + index + '" selected="selected">Option #' + index + '</option>');
}[/javascript]

Les champs ne s'ajoute pas mais Option # s'ajoute directement dans la liste déroulante...
On y est presque...

Merci pour ton aide

10 nov. 2013, 19:25

Ben oui il ajoute dans l texte de l'option Option # + le numéro de l'option. Mais il y a bien un champs <option></option> HTML qui s'est inséré. Je viens de tester exactement ce code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Document sans nom</title>
</head>

<body>

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
</select>

<br /><button onclick ="addOption()"> Ajouter un champ</button>

<script>
	function addOption(){
		var index = $('#leschamps_4 option').length + 1;
		$('#leschamps_4').append('<option value="example' + index + '" selected="selected">Option #' + index + '</option>');
	}
</script>

</body>
</html>

Et il marche exactement comme tu le demandes, à savoir rajouter une option au clic. Après, ce que tu veux mettre dans ton option (value, title, text) ça c'est autre chose.

10 nov. 2013, 19:32

oui oui exact...
Moi ce que je voulais faire c'est lorsque je clique sur le bouton, cela ajoute un select entier...
Exemple:

Je clique sur le bouton :

<br /><button onclick ="addOption()"> Ajouter un champ</button>

Cela créé:

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
</select>

je clique une nouvelle fois sur :

<br /><button onclick ="addOption()"> Ajouter un champ</button>

cela créé:

<select name="ligne_service_1" id="leschamps_4">
       <option value="Madame">Assistance Technique (R&eacute;gie)</option>
       <option value="Monsieur">Infog&eacute;rance</option>
       <option value="Monsieur">PCS</option>
       <option value="Monsieur">H&eacute;bergement</option>
       <option value="Monsieur">Int&eacute;gration CPEP</option>
       <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
       <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
       <option value="Monsieur">Assistance MOA</option>
       <option value="Monsieur">Négoce</option>
       <option value="Monsieur">Renouvellement Maintenance</option>
</select>

Et ainsi de suite, jusqu'à 5 ajouts maximum (mais peut être paramétrable)...

tu vois le truc ?
On ajoute pas que <option> mais <select>+<option>

Merci.

10 nov. 2013, 19:50

Quand on pose une question sur un forum, on essaie déjà de la poser correctement, ça évite de perdre du temps pour rien. Ton premier post:

je souhaiterai ajouter dynamiquement des champs <option> (liste déroulante) en cliquant sur un lien..

Pour moi ,ta question, c'est ajouter des champs option, pas un select... Bref, voici un code qui fonctionne comme tu veux:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Document sans nom</title>
</head>

<style>
	.mesSelects{
		margin-top:10px;
	}
</style>

<body>

<!--La DIV principale où on va ajouter les select -->
<div id="div_entiere">
   
    <!--Le select qu'on veut copier à chaque fois -->
    <div id="select_1" class="mesSelects">
        <select name="ligne_service_1" id="leschamps_4">
               <option value="Madame">Assistance Technique (R&eacute;gie)</option>
               <option value="Monsieur">Infog&eacute;rance</option>
               <option value="Monsieur">PCS</option>
               <option value="Monsieur">H&eacute;bergement</option>
               <option value="Monsieur">Int&eacute;gration CPEP</option>
               <option value="Monsieur">Int&eacute;gration Projet R&eacute;seau</option>
               <option value="Monsieur">Int&eacute;gration Projet Syst&egrave;me</option>
               <option value="Monsieur">Assistance MOA</option>
               <option value="Monsieur">Négoce</option>
               <option value="Monsieur">Renouvellement Maintenance</option>
        </select>
	</div>
    
</div>

<!--Le bouton d'appel au javascript -->
<br /><button onclick ="addSelect()"> Ajouter une Liste</button>

<script>
	NbreDiapos = 1;
	function addSelect(){
		NbreDiapos = NbreDiapos + 1;
		var selectACopier = $('#select_1').html();
		$('#div_entiere').append('<div id="select_'+NbreDiapos+'" class="mesSelects">'+selectACopier+'</div>');
	}
</script>

</body>
</html>

10 nov. 2013, 19:58

Désolé, effectivement je me suis mal exprimé!
c'est exactement ç! Merci et BRAVO!

Par contre sais-tu comment brider le nombre de <select> à créer ?
Par exemple on ne peut créer que 5 select et dès que le nombre est atteint, le bouton disparait...

Merci encore 1000 fois!

Ajout dynamique champs select

Qui est en ligne