Probleme pour supprimer un option dans un select

26 septembre 2016 à 1:34:59

Voila je vous explique mon probleme. Je suis en train de faire sur un de mes site un systeme de création de documents a plusieurs auteurs. Le créateur du document doit donc choisir qui d'autre va travailler avec lui. Ainsi il peut y avoir 4 auteur maximum. Le premier auteur étant le membre. On lui permet aussi de cliquer sur un bouton qui fait apparaitre une liste déroulante avec tous les auteurs. Il faut donc dans la liste déroulante supprimer le créateur du document qu'il ne se selectionne pas deux fois. Jusqu'ici tous va bien je m'en sort.

Le probléme arrive quand on passe au troisieme acteur, une nouvelle liste déroulante et de nouveau la fonction pour supprimer le créateur mais aussi l'auteur choisit avant. Mais la j'ai un probleme comme quoi un de mes options ne serais pas indexer.

Voici ma fonction:

//On retire le membre choisit dans le select precédent
function changeAuteur(utilisation)
{
	
	var test = auteurs - 1;
	//On recupere le select précedent montrant l'auteur qu'on n'a choisit
	var valeur = document.getElementById('select_'+test);
	//On stoque la valeur selectionner dans un tableau
	valeurs[test-1] = valeur.value;
	//On bloque le select pour evité qu'on rechange l'auteur et qu'on mette deux fois le même.
	valeur.disabled = true;
	
	//on récupere le select avec le nouvelle auteur, qui affiche tous les auteurs
	var auteur = document.getElementById('select_'+auteurs);
	var nombre = auteur.length;
	//On fait une boucle pour lire tous le select
	for(var i=0; i<nombre; i++)
	{
		//on recupere la valeur de chaque option
		var options = auteur[i].value; //TypeError: auteur[i] is undefined
		//on fait une boucle du tableau des auteurs qui ont était choisit avant.
		for(var j=0; j<valeurs.length; j++)
		{
			//si l'option de se selct et dans le tableau on supprime l'option
			if(options == valeurs[j])
			{
				auteur.removeChild(auteur[i]);
				//on vérifie si le select n'ai pas vide après la suppression
				if(auteur.length == 0)
				{
					//Si c'est vide on retire le bouton 'ajouter Membre' et le select vide.
					var nouveau = document.getElementById('nouveau');
					var auteurDiv = document.getElementById(auteurs);
					nouveau.style='display:none';
					auteurDiv.style='display.none';
				}
			}
		}
	}
}

Je ne comprend pas d'ou viens le probleme j'ai fait des alert un peu partout pour voir ou son les erreurs mais je n'ai rien trouver.

Merci a tous ceux qui m'aiderons a résoudre mon probleme.

-
Edité par Bones Del Tenebrae 26 septembre 2016 à 1:37:41

Bones Del Tenebrae

1 octobre 2016 à 18:15:17

007julien

1 octobre 2016 à 19:44:56

Est-ce que quelque chose comme cela ne serait pas plus pratique que tous ces boutons ?

<!DOCTYPE html>
<html>
<head>
<title>Choix des Auteurs</title>
<meta charset="utf-8" />
<style>
body {font-family:Garamond}
#pge {display:block;width:600px;margin:0 auto;}
#lst {display:block;float:left;width:200px;}
#grp {display:block;float:left;width:200px;}
ul {margin-top:0px;margin-bottom:0px;}
.drg {position:relative;cursor:pointer}

</style>


</head>
<body>
<div id="pge"><fieldset><legend>Constitution des groupes</legend>
	<div id="lst"><fieldset><legend>Participants</legend>
		<ul id="prt"></ul>
	</fieldset></div>
   <div id="grp"><fieldset><legend>Le groupe</legend>
		<ul id="aut"></ul>
	</fieldset></div>
</fieldset></div>
<script>
// Un simple raccourci d'écriture
function $(e){return document.getElementById(e)}
// Les auteurs
var auteurs="Armand,Barnabé,Charles,Damien,Édgar,Fabien,Gaston".split(',');
for (var i=0;i<auteurs.length;i++) $('prt').innerHTML+='<li class="drg">'+auteurs[i]+'</li>'
// Position x,y d'un élément du DOM
function getPos(obj){var curleft=curtop=0;
	if (obj.offsetParent)
		do {curleft+=obj.offsetLeft;curtop += obj.offsetTop;}
		while (obj=obj.offsetParent);
	 return [curleft,curtop];
}
// Les positions et dimensions du groupe
var posGrp=getPos($('grp')),wdtGrp=$('grp').offsetWidth,hghGrp=$('grp').offsetHeight;
console.log(posGrp+' '+wdtGrp+' '+hghGrp);
// Un objet pour rendre des éléments dragables
var drgObj={
	// Les coordonnéées de la souris, de la cible (target)
	sxo:0,syo:0,txo:null,tyo:null,trg:null,dOk:0,
	ntl:function(){
		document.onmousedown=window.ontouchstart=this.drf;
   	// In fine => conséquence des déplacement (avec u l'élément déplacé)
		document.onmouseup=window.ontouchend=function(){
			if (!this.dOk) return;
			// la position
			var pos=getPos(this.trg);
			console.log(this.trg.nodeName+' '+pos)
			// Si dans le groupe
         if (posGrp[0]<pos[0] && pos[0]<posGrp[0]+wdtGrp && posGrp[1]<pos[1] && pos[1]<posGrp[1]+hghGrp)
				{var v=this.trg.cloneNode(true);v.style.top='0px';v.style.left='0px';
				 $('aut').appendChild(v); // On dispose un clone
				 // Redimensionne le groupe
             wdtGrp=$('grp').offsetWidth,hghGrp=$('grp').offsetHeight;
				 // et tue l'objet initial
				 this.trg.parentNode.removeChild(this.trg)}
			// Sinon retour à la case départ
			else {this.trg.style.left=this.txo+'px';this.trg.style.top=this.tyo+'px';}
			this.dOk=0;this.trg=null;
		}
	}
	,drf:function(e){var o=e?e:window.event;
		if (o.preventDefault) o.preventDefault();
		var trg=e?e.target:event.srcElement,g;
		// Éviter les nodes inadaptés
  		while (trg.nodeType!=1 || (g=trg.nodeName.toLowerCase())!='li') trg=trg.parentNode;
		if (!/drg/.test(trg.className)) return
      this.trg=trg;this.dOk=1;
		this.txo=parseInt(this.trg.style.left) || 0;
		this.tyo=parseInt(this.trg.style.top) || 0;
     	if (typeof(o.touches)!='undefined'){this.sxo=o.touches[0].clientX;this.syo=o.touches[0].clientY;}
		else{this.sxo=o.clientX;this.syo=o.clientY}
		document.onmousemove=window.ontouchmove=drgObj.mvt
	}
	,mvt:function(e){var o=e?e:window.event,sxe,sye;
		if (o.preventDefault) o.preventDefault();
		if (this.dOk==1){
 			if (typeof(o.touches)!='undefined'){sxe=o.touches[0].clientX;sye=o.touches[0].clientY;}
			else {sxe=o.clientX;sye=o.clientY}
         this.trg.style.left=this.txo+sxe-this.sxo+"px";
			this.trg.style.top=this.tyo+sye-this.syo+"px";}
	}
}
drgObj.ntl();
</script>
</body>
</html>

Cela devrait fonctionner nonseulement à la souris mais aussi avec les gestes sur tablettes et autres téléphones...

Sinon pour travailler sur les options d'un select voir cette page

-
Edité par 007julien 1 octobre 2016 à 19:49:48

Bones Del Tenebrae

2 octobre 2016 à 16:13:07

Bonjour je te remercie pour ton aide.

Malheureusement, je ne vois pas en quoi cela peut m'aider, car je voudrais pouvoir stocker les auteurs choisit dans une base de données à l'aide d'un formulaire pour cela que j'avais utilisé des listes déroulantes. Le nombre d'auteur est limité aussi a 4 pour ne pas qu'il y est trop de problème lors de la création du document. Pour cela que j'avais voulu supprimer les utilisateurs déjà sélectionner dans la liste mais après deux auteurs sa bloque alors que j'en voudrait 4 maximum.

007julien

2 octobre 2016 à 21:01:42

Il ne devrait pas être très difficile de limiter les ajouts (donc les participants) à 4, de faire en sorte que le premier soit le chef de groupe et de stoker le tout en Bdd, avec une requête Ajax envoyant la liste des auteurs (les balises étant remplacées par des virgules) en Get.

Maintenant libre à vous de faire 36 listes avec les mêmes noms. Il suffit de conserver ceux-ci dans un tableau, d'utiliser la fonction splice pour supprimer un élément de ce tableau et de reconstruire le select avec le constructueur d'options.

-
Edité par 007julien 2 octobre 2016 à 21:03:58