Fonction pour listes déroulantes [Résolu]

Messages postés
4
Date d'inscription
jeudi 18 décembre 2008
Dernière intervention
23 août 2011
- - Dernière réponse : hairness59
Messages postés
4
Date d'inscription
jeudi 18 décembre 2008
Dernière intervention
23 août 2011
- 23 août 2011 à 08:25
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.

$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 :

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.
Afficher la suite 

Votre réponse

5 réponses

Meilleure réponse
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
3
Merci
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:

<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>

<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>


</html>



[o-_-o]

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 106 internautes ce mois-ci

Commenter la réponse de Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
0
Merci
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:
<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>

<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>


</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]
Commenter la réponse de Zobibol
Messages postés
4
Date d'inscription
jeudi 18 décembre 2008
Dernière intervention
23 août 2011
0
Merci
Ça marche parfaitement !! La classe Zobibol ! Tu gères à mort !

Merci beaucoup !!!
Commenter la réponse de hairness59
Messages postés
4
Date d'inscription
jeudi 18 décembre 2008
Dernière intervention
23 août 2011
0
Merci
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.
Commenter la réponse de hairness59
Messages postés
4
Date d'inscription
jeudi 18 décembre 2008
Dernière intervention
23 août 2011
0
Merci
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 !
Commenter la réponse de hairness59

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.