|
|
|
|
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.
Configuration: Windows 2000 Internet Explorer 6.0
Bonjour,
<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. ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~
|
Salut kij_82,
|
Répondre à kij_82
|