Php forcer listes déroulantes à zéro

Résolu
ouafasuin Messages postés 26 Date d'inscription   Statut Membre Dernière intervention   -  
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je travaille en php et j'ai 4 listes déroulantes, j'aimerais savoir comment faire en séléctionnant un choix
dans l'une des qutres listes, forcer les autres listes à zéro en sorte que l'utilisateur ne puisse rien saisir dans ces listes.

Merci pour votre aide.
A voir également:

3 réponses

Réponse 1 / 3
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857
 
Bonjour,

Forcer une liste à zéro, qu'entends-tu exactement par là ? Remettre la sélection sur la première valeur de la liste ou vider la liste de ses valeurs ?
Faite en sorte que l'utilisateur ne puisse plus sélectionner les valeurs d'une liste n'est pas la même chose, c'est donc une fonctionnalité en plus.

En PHP, tu ne pourra pas faire ce que tu souhaite, du moins ce serait faisable mais barbare et compliqué pour si peu. Je te conseilles donc d'utiliser du javascript pour mettre à jour dynamiquement ces listes.
Admettons que tu ai 4 listes identifiée de la manière suivante : 

<select id="toto1">...</select>
<select id="toto2">...</select>
<select id="toto3">...</select>
<select id="toto4">...</select>


Et que ces listes ont toutes plusieurs valeurs possible. Si tu souhaite par exemple forcer la sélection sur la première valeur des listes toto2,toto3 et toto4 lorsqu'une valeur est sélectionnée dans toto1, il faut faire comme suit (sans prendre en compte le control sur la valeur sélectionnée dans la liste toto1, je ne mets que le code permettant de forcer la sélection sur la première valeur de la liste) : 

<script language="javascript">
// --- Fonction permettant de sélectionner la première valeur d'une liste passée en paramètre à la fonction
function selectFirstValue ( _list_ ){
    if ( _list_ != null && _list_.options.length > 0 )
        _list_.options[0].selected = "selected";
}

// ---- Appel de la fonction sur les trois listes :
if ( document.getElementById("toto2") != null )
   selectFirstValue(document.getElementById("toto2"));
if ( document.getElementById("toto2") != null )
   selectFirstValue(document.getElementById("toto3"));
if ( document.getElementById("toto2") != null )
   selectFirstValue(document.getElementById("toto4"));
</script>


Ce code javascript, tu dois le placer là où tu veux que ton control soit effectué (par exemple sur l'évènement "onchange" de la liste 1, comme dans l'exemple complet ci-dessous :

Ton "formulaire" avec 4 listes : 
<script language="javascript">
function selectFirstValue ( _list_ ){
    if ( _list_ != null && _list_.options.length > 0 )
        _list_.options[0].selected = "selected";
}

function controlList ( _obj_, _listLabels_ ){
   // --- Control value of the list
   if ( _obj_ != null && _obj_.value == 2 ){
       // --- Change selection of the lists represented by it labels
       var labels = _listLabels_.split(";");
       for (var i = 0; i < labels.length; i++)
           selectFirstValue(document.getElementById(labels[i]));
   }
}
</script>

<SELECT id="toto1" onchange="controlList(this,'toto2;toto3;toto4')">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>
<BR>
<SELECT id="toto2">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>
<BR>
<SELECT id="toto3">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>
<BR>
<SELECT id="toto4">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>


Le code ci-dessus n'a pas été testé donc il est possible que j'ai fait des erreurs de syntaxe, mais ça devrait fonctionner.

Pour ce qui est de vouloir empêcher l'utilisateur de sélectionner une autre valeur dans ces listes, il te faudra modifier la valeur de la propriété CSS 'disabled' = 'true'/'false' de ta liste de sélection là où tu le souhaite, c'est à dire lorsqu'un certaine valeur de la liste 1 est sélectionnée par exemple, alors, non seulement tu force la sélection sur la première valeur dans les autres listes, mais en plus tu interdit de change cette sélection. Par contre il faut bien penser à re-permettre la sélection dans ces autres listes si l'utilisateur change la valeur sélectionnée dans la liste 1.
Exemple : 

<script language="javascript">
function selectFirstValue ( _list_ ){
    if ( _list_ != null && _list_.options.length > 0 )
        _list_.options[0].selected = "selected";
}

function enableDisable ( _list_, _disable_ ){
   if ( _list_ != null ){
        if ( _disable_ )
           _list_.style.disabled = 'true';
        else
           _list_.style.disabled = 'false';
   }
}

function controlList ( _obj_, _listLabels_ ){
   // --- Control value of the list
   if ( _obj_ != null && _obj_.value == 2 ){
       // --- Change selection of the lists represented by it labels
       var labels = _listLabels_.split(";");
       for (var i = 0; i < labels.length; i++){
           // --- For selection
           selectFirstValue(document.getElementById(labels[i]));
           // --- Disabled select lists
           enableDisable(document.getElementById(labels[i]),true);
       }
   }
   else {
       // --- Enable select lists (in case it is disabled)
       var labels = _listLabels_.split(";");
       for (var i = 0; i < labels.length; i++){
           // --- Enable select lists
           enableDisable(document.getElementById(labels[i]),false);
       }
   }
}
</script>

<SELECT id="toto1" onchange="controlList(this,'toto2;toto3;toto4')">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>
<BR>
<SELECT id="toto2">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>
<BR>
<SELECT id="toto3">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>
<BR>
<SELECT id="toto4">
   <OPTION value="1">val 1</OPTION>
   <OPTION value="2">val 2</OPTION>
   <OPTION value="3">val 3</OPTION>
</SELECT>


Bon voilà, en espérant que cela t'ai un peu éclairé sur le sujet.
1
ouafasuin Messages postés 26 Date d'inscription   Statut Membre Dernière intervention  
 
Je te remercie infiniment pour ton aide, c'est exactement ce que je cherchais à faire, je vais essayer de comprendre ce que tu m'a envoyé et l'adapter à mon code.
0
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857 > ouafasuin Messages postés 26 Date d'inscription   Statut Membre Dernière intervention  
 
Ok si tu as des questions n'hésite pas.
Par contre en relisant je viens de m'apercevoir d'une erreur de code (en gras ci-dessous): 

function controlList ( _obj_, _listLabels_ ){
   // --- Control value of the list
   if ( _obj_ != null && _obj_.value == 2 ){
       // --- Change selection of the lists represented by it labels
       var labels = _listLabels_.split(";");
       for (var i = 0; i < labels.length; i++)
           selectFirstValue(document.getElementById(labels[i]));
   }
}


Comme il s'agit d'une liste, ce n'est pas _obj_.value, mais _obj_.options[_obj_.options.selectedIndex].value qu'il faut mettre : 

function controlList ( _obj_, _listLabels_ ){
   // --- Control value of the list
   if ( _obj_ != null && _obj_.options[_obj_.options.selectedIndex].value == 2 ){
       // --- Change selection of the lists represented by it labels
       var labels = _listLabels_.split(";");
       for (var i = 0; i < labels.length; i++)
           selectFirstValue(document.getElementById(labels[i]));
   }
}


Sinon une explication du code manquait concernant cette partie : 
var labels = _listLabels_.split(";");
for (var i = 0; i < labels.length; i++)
   selectFirstValue(document.getElementById(labels[i]));


Comme tu l'as vu je me suis permit d' "automatiser" le traitement de la façon suivante : tu donne en second paramètre de cette fonction, la liste des identifiant des listes que tu souhaite voir modifiée, chaque identifiant séparé par un ';'. Ainsi, en splitant cette chaine de caractère on récupère chaque identifiant et on appelle la fonction de modification de la sélection (ou celle qui modifie le style css) pour chaque liste dont l'identifiant a été renseigné.
0
Réponse 2 / 3
ouafasuin Messages postés 26 Date d'inscription   Statut Membre Dernière intervention  
 
salut kij_82,

OK, j'ai bien compris le principe mais en essayant la fontion function controlList() sur ma première liste, tout ce que j'obtiens c'est une initialisation de la liste1 sur la première valeur mais on peut toujours choisir une autre valeur dans l'unes des trois listes restantes et envoyer la requette, or moi je voudrais que l'utilisateur ne puisse choisir qu' une seule valeur d'une seule liste déroulante, les autres se mettent par defaut à une valeur nulle.

Merci encore pour ton aide!
0
Réponse 3 / 3
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857
 
Ok je testerai le code que je t'ai donné dans l'après midi selon mon temps libre. Ce doit être la propriété css disabled qui ne doit pas être bonne.
0
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857
 
Ok, c'était bien ça, voici la correction sur la fonction qui change la propriété : 
function enableDisable ( _list_, _disable_ ){
   if ( _list_ != null ){
        if ( _disable_ )
           _list_.disabled = 'disabled';
        else
           _list_.disabled = '';
   }
}


Chez moi tout fonctionne.
0

Discussions similaires

écrire un zéro barré
jaja -
Aurélie19 -

8 réponses
o barré ou zéro barré...
Nony80 -
bl@ndine -

3 réponses