begin process at 2012 05 29 06:39:12
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Fonction pour listes déroulantes


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Fonction pour listes déroulantes

vendredi 19 août 2011 à 16:32:10 | Fonction pour listes déroulantes

hairness59

Bonjour,

je débute en JS, je ne m'en sors pas avec une fonction.

Voila, j'ai dans un formulaire sous forme de tableau une même liste déroulante qui se répète sur x lignes du tableau.

Code PHP :
$total=count($_POST['id_adherent']);
$compteur=1;
  foreach($_POST['id_adherent'] AS $valeur)
   {
   //requête SQL:
   $sql_adh = "SELECT * FROM thp_adherent WHERE id_adherent='$valeur'";
   //exécution de la requête:
   $requete_adh = mysql_query( $sql_adh,$link) ;
       while ($donnees_adh=mysql_fetch_array($requete_adh))
         {
         $milieu .="<SELECT name='position[$compteur]' onChange='verifchoix()' id='position[$compteur]'>";
         $milieu .="<OPTION value='0'></OPTION>";
                            For ($j=0;$j<$total;$j++)
                            {                 
                            $milieu .="<OPTION value='$j'>$j</OPTION>";
                            }
         $milieu .="</SELECT>";
         $compteur++;
          } //fin while
    } //fin foreach


Mon but étant de créer une fonction JS qui me permettrait d'afficher un message d'alerte lorsque l'utilisateur choisit une valeur identique entre plusieurs listes déroulantes.
En clair, le choix de l'utilisateur sur une liste ne doit pas être le même sur une autre liste déroulante du tableau sinon ce message apparait.

En exemple, j'ai créé une fonction avec seulement 2 listes déroulantes présentes sur le tableau :

Code Javascript :
function verifchoix()
{
var position1 = document.getElementById("position[1]" );
var position2 = document.getElementById("position[2]" );
if (position1.options[position1.options.selectedIndex].value==position2.options[position2.options.selectedIndex].value)
{
alert('Attention, ce choix a déjà sélectionné !!);
}
}


Ca marche bien sur... Mais mes compétences JS étant limitées, ma question est comment améliorer cette fonction pour qu'elle prenne en compte non pas seulement 2 listes mais x listes déroulantes présentes dans le formulaire ?

Je m'arrache les cheveux...

Merci pour vos réponses.
vendredi 19 août 2011 à 17:12:35 | Re : Fonction pour listes déroulantes

Zobibol

Membre Club
Bien le bonjour, je crois que débutant ou pas, le problème est bien loin d'être simple, en outre, j'ai peut être une solution.
je me suis appuyé largement sur les sources fournit, donc, j'espère que la compatibilité devrait être ok, sinon, il va falloir adapté.

on va commencer par mettre un bout de code:
Code HTML :
<html>
	<head>
		<script type="text/javascript">
		function checkUniqueValue(_sel){
			// Création d'un enregistrement de type tableau
			var result = new Array();
			// si le select est précisé.
			if (_sel){
				// Valeur en cours
				var currentValue = _sel.options[_sel.selectedIndex].value;
				// L'ajoute de suite au tableau.
				result[currentValue] = true;
			}
			// Récupération de toutes les combos.
			var _selects = document.getElementsByTagName("select");
			// parcours l'ensemble de ceux-ci
			for ( var i=0; i<_selects.length; i++){
				// on considère que l'on ne traite que les select qui ont un id de type: position[
				if( _selects[i].id && _selects[i].id.indexOf ("position[") != -1 && ((_sel != null && _selects[i].id != _sel.id) || !_sel)) {
					// Récupération de la valeur sélectionnée.
					var actualValue = _selects[i].options[_selects[i].selectedIndex].value;
					// y a-t-il une valeur de sélectionnée ?
					if (actualValue){
						// le plus simple est de tester si la valeur existe dans le tableau de résultat.
						if ( result[actualValue] ){
							// La, il faut informé l'utilisateur que ça va pas bien.
							alert (" item selected value '"+actualValue+"' is defined for more than one select");
							if ( _sel){
								_sel.focus();
							}
							return false;
						}
						// sinon, il suffit de l'ajouter au tableau des résultats.
						else{
							// si l'on demande la validation sans passer de select, il faut tester tous les selects.
							if ( !_sel){
								result[actualValue] = true;
								}
						}
						
					}
				}
			}
			return true;
		}
		</script>
	</head>
	<body>
		<select id="position[0]" onchange=" return checkUniqueValue(this)">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<select id="position[1]"  onchange="return checkUniqueValue(this)">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<select id="position[2]"  onchange="return checkUniqueValue(this)">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<input type="button" value="checkValidity" onmousedown="checkUniqueValue()" />
	</body>
</html>


puis je vais me risquer à une explication,
la méthode que j'ai mise en place (checkUniqueValue()) possède comme paramètre le select sur lequel l'utilisateur est positionné. Ce paramètre est optionnel, afin de pouvoir revalidé l'écran total (je n'arrive pas à rester bloqué dans une combobox (...)

s'il le paramètre est précisé, la première chose à faire est de récupérer la valeur sélectionné, puis ensuite, pour chacun des selects présents sur la page (document.getElementsByTagName("select")) si les identifiants commencent par positon[ (afin de permettre la mise en place de select qui ne doivent pas être vérifié, il suffit que leur id ne soit pas position[xx]), si la valeur est trouvée -> message d'erreur.

s'il n'est pas précisé, alors c'est l'ensemble des selects (soumis au critères id débute par position[ ) qui va être tester, il serait bon d'exécuter cette méthode au moment de la soumission du formulaire ou de la validation, c'est en quelques sorte une double vérification suite à ce message: je n'arrive pas à rester bloqué dans une combobox et je ne sais pas pourquoi.

Punaise, plus je me relis, moins je me comprends, je vais mettre ça sur le compte du vendredi 17h15.

Je suis toujours dispo pour de plus amples informations


[o-_-o]
lundi 22 août 2011 à 09:07:11 | Re : Fonction pour listes déroulantes

hairness59

Ça marche parfaitement !! La classe Zobibol ! Tu gères à mort !

Merci beaucoup !!!
lundi 22 août 2011 à 12:39:45 | Re : Fonction pour listes déroulantes

hairness59

Pour plus de lisibilité dans les choix à effectuer dans chaque select(surtout lors de la présence d'une 30aine de select), j'essaie (en me basant sur ton code) de passer automatiquement en vert les choix déjà sélectionnés par l'utilisateur dans les selects.
En clair, quand on clique sur la liste déroulante, on apercoit déjà les lignes de choix en vert si ce choix a déjà été effectué.

j'ai essayé pas mal de trucs mais je n'y arrive pas...notamment avec _selects[i].options[_selects[i].selectedIndex].style.color='green';

mais je ne sais pas trop l'exploiter et ou le placer dans ton code.
lundi 22 août 2011 à 16:42:53 | Re : Fonction pour listes déroulantes

Zobibol

Membre Club
Réponse acceptée !
Bien le re-bonjour, cette fois-ci on mettra ça sur le compte du lundi 16h42 c'est tout ?????

Donc, la gestion de ce genre de cas est très très sioux et cela m'a légèrement demandé pas mal de boulot.

il faut prendre en compte tous les selects, et c'est un peu la que j'ai patiné, mais je pense que j'ai bien rebondi
j'ai donc mis à jour la méthode de check afin de passer les items déjà sélectionnés en couleur (ça fait super jolie...)

j'aime pas trop comment j'ai traité le problème, il ne semble pas optimal, mais pour l'instant la solution est la:

Code HTML :
<html>
	<head>
		<script type="text/javascript">
		function checkUniqueValue(_sel){
			// Création d'un enregistrement de type tableau
			var result = new Array();
			var currentValue;
			// si le select est précisé.
			if (_sel){
				// Valeur en cours
				currentValue = _sel.options[_sel.selectedIndex].value;
				// L'ajoute de suite au tableau.
				result[currentValue] = true;
			}
			// Liste des valeurs sélectionnnées dans les selects.
			var listSelectedValue = new Array();
			
			// Récupération de toutes les combos.
			var _selects = document.getElementsByTagName("select");
			// parcours l'ensemble de ceux-ci
			for ( var i=0; i<_selects.length; i++){
				// on considère que l'on ne traite que les select qui ont un id de type: position[
				if( _selects[i].id && _selects[i].id.indexOf ("position[") != -1 && ((_sel != null && _selects[i].id != _sel.id) || !_sel)) {
					// Récupération de la valeur sélectionnée.
					var actualValue = _selects[i].options[_selects[i].selectedIndex].value;
					// y a-t-il une valeur de sélectionnée ?
					if (actualValue){
						// stock la valeur sélectionnée.
						listSelectedValue.push(actualValue);
						// le plus simple est de tester si la valeur existe dans le tableau de résultat.
						if ( result[actualValue] ){
							// La, il faut informé l'utilisateur que ça va pas bien.
							alert (" item selected value '"+actualValue+"' is defined for more than one select");
							if ( _sel){
								_sel.focus();
							}
							return false;
						}
						// sinon, il suffit de l'ajouter au tableau des résultats.
						else{
							// si l'on demande la validation sans passer de select, il faut tester tous les selects.
							if ( !_sel){
								result[actualValue] = true;
							}
						}
					}
				}
			}
			if ( currentValue){
				listSelectedValue.push(currentValue);
			}
			// maintenant on va reparcourir la liste des selects afin de taggué les valeurs sélectionnées.
			for ( var i=0; i<_selects.length; i++){
				// Récupère ses options.
				var options =_selects[i].options;
				// Première chose à faire supprimer la couleur des items selectionnés.
				for ( var j = 0; j<options.length; j++){
					options[j].style.color="black";
					options[j].style.backgroundColor="white";
				}
				// Parcours l'ensembles des lignes sélectionnées
				for (var j =0; j<listSelectedValue.length; j++){
					var actual = listSelectedValue[j] 
					// pour chacune des options, si il y a correspondance entre la valeur 
					for (var k=0; k<options.length; k++){
						// si égalité entre l'attribut value du select et la valeur sélectionnée en cours de vérif, change la couleur de l'option
						if ( options[k].value == actual){
							options[k].style.color="white";
							options[k].style.backgroundColor="black";
						}
					}
				}
			}
			return true;
		}
		</script>
	</head>
	<body>
		<select id="position[0]" onchange=" return checkUniqueValue(this)">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
		<select id="position[1]"  onchange="return checkUniqueValue(this)">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
		<select id="position[2]"  onchange="return checkUniqueValue(this)">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
		<input type="button" value="checkValidity" onmousedown="checkUniqueValue()" />
	</body>
</html>



[o-_-o]
mardi 23 août 2011 à 08:25:09 | Re : Fonction pour listes déroulantes

hairness59

Vraiment très fort Zobibol !

Super boulot ! Vraiment merci car je n'aurai jamais pu trouvé seul !
J'espère qu'il te reste quand même des cheveux après cette prise de tête !
Ça va vraiment me faciliter la vie !


Cette discussion est classée dans : fonction, listes, js, déroulantes, adh


Répondre à ce message

Sujets en rapport avec ce message

pb fonction js pour submit de formulaire dynamique [ par BDdev ] HELP !!!!je créé dynamiquement sur une page un tableau contenant les résultats d'une requete sql et dans chaque ligne un formulaire (caché) et je voud Griser des listes déroulantes [ par Mask ] J'aurais aimer savoir comment je peux griser une liste déroulante HTML depuis le Javascript, de sotre que ne soit pas utilisable!MerciM@sK Griser des listes déroulantes [ par Mask ] J'aurais aimer savoir comment je peux griser une liste déroulante HTML depuis le Javascript, de sotre que ne soit pas utilisable!MerciM@sK compatibilité JS - PHP [ par etrevilly ] Bijours a tous, depuis ce matin je me prend la tête ac ça dans ma page fonction.js j'ai une fonction qui contient ça : document.write('') Dans ma p JS et ASP [ par madoman ] slt à tousle fonction suivante doit m'avertir en fonction de paramètres : je sélectionne une date dans ma liste (txt_date) et j'ai un tableau qui m'af est-il possibe d'appeler une fonction JS à partir d'une ligne HTML généré par une fonction JS [ par pogonkt ] Bonjour à tous,je démarre en JS et j'essaie plusieurs petites choses avant de me lancer... Je bute sur le programme ci-dessous.Quand je clique sur le Synchronizer 3 listes déroulantes [ par iomega ] Bonjour à tous je voudrai savoir si c'est possible en javascript de synchronizer 3 listes déroulange c'est-à-dire que dans la 1ère j'ai mes titres dan controler des listes déroulantes en javascipt dans du PHP [ par animallecter ] Tout est quasiment dans le titre mais je vais expliquer 1 peu plus:J'ai 2 listes déroulantes qui se suivent et la deuxième doit dépendre de l'autre, d Listes déroulantes liées (requêtes sql + php) [ par orelien ] Bonjour,J'aimerais relier deux listes déroulantes remplies par une base de données. La première correspond à la table "rubriques" et l'autre à la tabl requete + php dans fonction JS [ par dianouch ] Bonjour!je veux faire 1 fonction JS de vérification de formulaire, dans laquelle je dois faire une requete SQL en php.val est une variable JS contenan


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,856 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales