Comment vider plusieurs select document.getElementById('?)

07 sept. 2010, 21:01

Bonjour,

J'utilise le script ci-dessous pour montrer/cacher diverses éléments et notamment des formulaires.

<script language="javascript" type="text/javascript">
    function afficheBoite(num) {
       var maxBoite = 10; // Indiquer ici le nombre maximale de boite possible
       for (var i = 1; i <= maxBoite; i++) {
          var boite = document.getElementById('boite'+i);
          if (boite) {
             if (i == num) {
                boite.style.display = 'block';
             } else {
                boite.style.display = 'none';
             }
          }
       }
    }
    </script>

Ce code est associé au formulaire suivant dont chaque sélection ouvre un 'div' différent

Code : Tout sélectionner

    <select name="categorie">
       <option value="0">«Choisissez la cat&eacute;gorie»</option>
       <option value='1' onclick="afficheBoite(1);">+++</option>
       <option value='2' onclick="afficheBoite(2);">+++</option>
       <option value='3' onclick="afficheBoite(3);">+++</option>
    </select>

Code : Tout sélectionner

    <div id='boite1' style='display:none;'>
    <select name="departement1" id="1" onChange="document.getELementById(2').options.length=0;">
    <option value="0">«Choisissez»</option>
    <option value="1" <?php if($departement1==1){echo "selected='selected'";}?>>++</option>
    <option value="2" <?php if($departement1==2){echo "selected='selected'";}?>>++</option>
    </select>
    </div>

    <div id='boite2' style='display:none;'>
    <select name="departement2" id="2" onChange="document.getELementById('1').options.length=0;">
    <option value="0">«Choisissez»</option>
    <option value="1" <?php if($departement2==1){echo "selected='selected'";}?>>++</option>
    <option value="2" <?php if($departement2==2){echo "selected='selected'";}?>>++</option>
    </select>
    </div>

Dans le formulaire ci-dessus, j'utilise le bout de code :

Code : Tout sélectionner

id="1" onChange="document.getELementById('2').options.length=0;"

...pour vider le select du formulaire id="2" et inversement pour vider le select du formulaire id="1" avec celui-ci

Code : Tout sélectionner

id="2" onChange="document.getELementById('1').options.length=0;"

Mon soucis réside dans le faite qu'il y a plusieurs formulaires masqués et que visiblement la fonction document.getELementById() ne peut pas comporter plusieurs id...

L'idée est de vider tous les formulaires sauf celui qui à été le dernier sélectionné.
Une suggestion ?
Merci

08 sept. 2010, 08:03

Salut,

tu devrais utiliser la fonction js :

getElementsByClass , qui te renverra un tableau contenant tes éléments de même class.

Ensuite tu fais une petite boucle pour effectuer ton opération de "cache cache" dur chacun d'eux .

Ch.

08 sept. 2010, 09:07

Merci stopher,

Ce n'est pas le "cache cache" de mes éléments qui me pose problème mais plutôt le faite de ne pas réussir à "vider" les formulaires sauf celui qui à été le dernier sélectionné.

En même temps, j'aurais peut être du préciser que je suis très nul en "js" et que je n'ai sans doute pas saisie le sens de ta réponse

...

08 sept. 2010, 23:24

tu devrais utiliser la fonction js :

getElementsByClass , qui te renverra un tableau contenant tes éléments de même class.
Ch.

getElementsByClass ? heu à moins d'utiliser une lib je penses pas que ce soit une fonction native (pour l'instant).

Il y a bien getElementsByClassName implémentée dans FF3 et d'autres navigateurs, mais sous IE ou anciennes versions de navigateur, il faut la créer cette fonction.

@tryan
pour qu'un id soit valide il doit commencer par une lettre (donc id = "1" n'est pas valide).

Sinon plutôt que d'effacer le contenu des autres formulaires onChange, tu pourrais peut-être les effacer lors de l'affichage de la nouvelle boite, ce qui pourrait donner en modifiant un peu ton code :

Code : Tout sélectionner

<script language="javascript" type="text/javascript">
    function afficheBoite(num) {
       var maxBoite = 10; // Indiquer ici le nombre maximale de boite possible
       for (var i = 1; i <= maxBoite; i++) {
          var boite = document.getElementById('boite'+i);
          if (boite) {
             if (i == num) {
                boite.style.display = 'block';
             } else {
                boite.style.display = 'none';

                var select = document.getELementById('departement'+i);
                if(select) select.options.length=0;
             }
          }
       }
    }
    </script>

    <select name="categorie">
       <option value="0">«Choisissez la cat&eacute;gorie»</option>
       <option value='1' onclick="afficheBoite(1);">+++</option>
       <option value='2' onclick="afficheBoite(2);">+++</option>
       <option value='3' onclick="afficheBoite(3);">+++</option>
    </select>


    <div id='boite1' style='display:none;'>
    <select name="departement1" id="departement1">
    <option value="0">«Choisissez»</option>
    <option value="1" <?php if($departement1==1){echo "selected='selected'";}?>>++</option>
    <option value="2" <?php if($departement1==2){echo "selected='selected'";}?>>++</option>
    </select>
    </div>

    <div id='boite2' style='display:none;'>
    <select name="departement2" id="departement2">
    <option value="0">«Choisissez»</option>
    <option value="1" <?php if($departement2==1){echo "selected='selected'";}?>>++</option>
    <option value="2" <?php if($departement2==2){echo "selected='selected'";}?>>++</option>
    </select>
    </div>

    <div id='boite3' style='display:none;'>
    <select name="departement3" id="departement3">
    <option value="0">«Choisissez»</option>
    <option value="1" <?php if($departement3==1){echo "selected='selected'";}?>>++</option>
    <option value="2" <?php if($departement3==2){echo "selected='selected'";}?>>++</option>
    </select>
    </div>

09 sept. 2010, 07:31

tu devrais utiliser la fonction js :

getElementsByClass , qui te renverra un tableau contenant tes éléments de même class.
Ch.
getElementsByClass ? heu à moins d'utiliser une lib je penses pas que ce soit une fonction native (pour l'instant).

Il y a bien getElementsByClassName implémentée dans FF3 et d'autres navigateurs, mais sous IE ou anciennes versions de navigateur, il faut la créer cette fonction.

Effectivement ,

Je l'utilise via prototype j'avais oublié de préciser ce point :p
http://www.prototypejs.org/api/element/ ... yClassName

09 sept. 2010, 10:48

Effectivement ,

Je l'utilise via prototype j'avais oublié de préciser ce point :p
http://www.prototypejs.org/api/element/ ... yClassName

As of Prototype 1.6, document.getElementsByClassName has been deprecated since native implementations return a NodeList rather than an Array. Please use $$ or Element#select instead.

09 sept. 2010, 10:49

Bonjour et merci pour votre aide,

@AB : Ton script me pose quelques soucis.
1)Lors d'une sélection du formulaire "categorie", "afficheBoite(1)" me donne bien accès à div id='boite1'. Par contre, afficheBoite(2) et afficheBoite(3) ne me donne pas accès aux 2 autres div.
2)Lors de la validation, afficheBoite(***) ne se ré affiche pas.

Il faut également que l'utilisateur puisse modifié ses choix en cas d'erreur.

Code : Tout sélectionner

<html>
<head>

<script language="javascript" type="text/javascript">
    function afficheBoite(num) {
       var maxBoite = 10; // Indiquer ici le nombre maximale de boite possible
       for (var i = 1; i <= maxBoite; i++) {
          var boite = document.getElementById('boite'+i);
          if (boite) {
             if (i == num) {
                boite.style.display = 'block';
             } else {
                boite.style.display = 'none';

                var select = document.getELementById('departement'+i);
                if(select) select.options.length=0;
             }
          }
       }
    }

    </script>
</head>
<body>

<?php
if (isset($_POST["envoyer"]))
{
//Région
$region = $_POST["region"];

//Département
$departement1 = $_POST["departement1"];
$departement2 = $_POST["departement2"];
$departement3 = $_POST["departement3"];

echo 'Région:'.$region.'<br/>
Dep1:'.$departement1.'<br/>
Dep2:'.$departement2.'<br/>
Dep3:'.$departement3.'';
}
?>

<form name="listes" action="#ancre_formulaire" method="post">
    <select name="region">
       <option value="0">«Choisissez la Région»</option>
       <option value="1" onclick="afficheBoite(1);"<?php if($region==1){echo "selected='selected'";}?>>Alsace</option>
       <option value="2" onclick="afficheBoite(2);"<?php if($region==2){echo "selected='selected'";}?>>Aquitaine</option>
       <option value="3" onclick="afficheBoite(3);"<?php if($region==3){echo "selected='selected'";}?>>Auvergne</option>
    </select>

    <div id='boite1' style='display:none;'>
    <select name="departement1" id="departement1">
       <option value="0">«Choisissez»</option>
       <option value="1" <?php if($departement1==1){echo "selected='selected'";}?>>Bas-Rhin</option>
       <option value="2" <?php if($departement1==2){echo "selected='selected'";}?>>Haut-Rhin</option>
    </select>
    </div>

    <div id='boite2' style='display:none;'>
    <select name="departement2" id="departement2">
       <option value="0">«Choisissez»</option>
       <option value="3" <?php if($departement2==3){echo "selected='selected'";}?>>Dordogne</option>
       <option value="4" <?php if($departement2==4){echo "selected='selected'";}?>>Gironde</option>
       <option value="5" <?php if($departement2==5){echo "selected='selected'";}?>>Landes</option>
       <option value="6" <?php if($departement2==6){echo "selected='selected'";}?>>Lot-et-Garonne</option>
       <option value="7" <?php if($departement2==7){echo "selected='selected'";}?>>Pyr&eacute;n&eacute;es-Atlantiques</option>
    </select>
    </div>

    <div id='boite3' style='display:none;'>
    <select name="departement3" id="departement3">
	<option value="0">«Choisissez»</option>
       <option value="8" <?php if($departement3==8){echo "selected='selected'";}?>>Allier</option>
       <option value="9" <?php if($departement3==9){echo "selected='selected'";}?>>Cantal</option>
       <option value="10" <?php if($departement3==10){echo "selected='selected'";}?>>Haute-Loire</option>
       <option value="11" <?php if($departement3==11){echo "selected='selected'";}?>>Puy-de-d&ocirc;me</option>
    </select>
    </div>
   <input class="boutton" name="envoyer" value="envoyer" type="submit"/>
   <input class="boutton" name="Effacer" value="Effacer" type="reset"/>
</form>

</body>
</html>

Merci

09 sept. 2010, 22:41

Oui c'était pour le principe, j'avais pas testé.

En reprenant le principe de ton code on peut faire un truc du genre (à tester dans une page séparée):

<?php
if (isset($_POST["envoyer"],$_POST['region'],$_POST['departement']) && $_POST['departement'] != 0 && $_POST['region'] != 0)
{
//Région
$region = $_POST["region"];

//Département
$departement = $_POST["departement"];

echo 'Région:'.$region.'<br/>
Departement:'.$departement.'<br/>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--

function Affiche_Departement() {
// Pour afficher le département après le post
<?php if (isset($_POST["region"]))
    { ?>
        var boite = document.getElementById('boite<?php echo $_POST["region"]?>');
        
        if (boite)
            {
                boite.style.display = 'inline';
                boite.disabled = false;
            }
    <?php }?>

}


function AfficheBoite(num) {
 
var maxBoite = 10; // Indiquer ici le nombre maximale de boite possible

for (var i = 1; i <= maxBoite; i++)
   {
        var boite = document.getElementById('boite'+i);
                                       
        if (boite)
            {
                if (i == num)
                    {
                        boite.style.display = 'inline';
                        boite.disabled = false;
                    }
                    else
                    {
                        boite.style.display = 'none';
                        boite.disabled = true;
                    }
            }
    }
}
-->
</script>
<style type="text/css">
.select_dep {
display:none;
}
</style>
</head>

<body onload = "Affiche_Departement()">
<div>
<form action = "#ancre_formulaire" method = "post" >
<div>
    <select name="region" id = "region" onchange = "AfficheBoite(this.value)">
       
       <option value = "0">«Choisissez la Région»</option>
       <option value = "1"  <?php echo isset($_POST["region"]) && $_POST["region"] == 1 ? 'selected = "selected"' : '';?>>Alsace</option>
       <option value = "2"  <?php echo isset($_POST["region"]) && $_POST["region"] == 2 ? 'selected = "selected"' : '';?>>Aquitaine</option>
       <option value = "3" <?php echo isset($_POST["region"]) && $_POST["region"] == 3 ? 'selected = "selected"' : '';?>>Auvergne</option>
           
    </select>
       
       
    <select class="select_dep" name="departement" id="boite1" onchange = "AfficheBoite(1)"  disabled="disabled">
       
       <option value = "0">«Choisissez»</option>
       <option value = "1" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 1 ? 'selected = "selected"' : '';?>>Bas-Rhin</option>
       <option value = "2" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 2 ? 'selected = "selected"' : '';?>>Haut-Rhin</option>
           
    </select>
       
       
    <select class="select_dep" name="departement" id="boite2" onchange = "AfficheBoite(2)" disabled="disabled">
       
       <option value = "0">«Choisissez»</option>
       <option value = "3" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 3 ? 'selected = "selected"' : '';?>>Dordogne</option>
       <option value = "4" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 4 ? 'selected = "selected"' : '';?>>Gironde</option>
       <option value = "5" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 5 ? 'selected = "selected"' : '';?>>Landes</option>
       <option value = "6" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 6 ? 'selected = "selected"' : '';?>>Lot-et-Garonne</option>
       <option value = "7" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 7 ? 'selected = "selected"' : '';?>>Pyr&eacute;n&eacute;es-Atlantiques</option>
           
    </select>
       
       
    <select class="select_dep" name="departement" id="boite3" onchange = "AfficheBoite(3)" disabled="disabled">
       
        <option value = "0">«Choisissez»</option>
        <option value = "8" <?php echo isset($_POST["departement"])  && $_POST["departement"] == 8 ? 'selected = "selected"' : '';?>>Allier</option>
        <option value = "9" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 9 ? 'selected = "selected"' : '';?>>Cantal</option>
        <option value = "10" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 10 ? 'selected = "selected"' : '';?>>Haute-Loire</option>
        <option value = "11" <?php echo isset($_POST["departement"]) && $_POST["departement"] == 11 ? 'selected = "selected"' : '';?>>Puy-de-d&ocirc;me</option>
               
    </select>


   <input class="boutton" name="envoyer" value="envoyer" type="submit"/>
   
   </div>
</form>
</div>
</body>
</html>

C'est le résultat que tu attends ?

Sinon bon c'est quand même un peu du bricolage... cela dit ça à l'air de fonctionner et ça peut être utile quand on souhaite un référencement du contenu des listes et pour des listes pas trop longues (tous les selects sont affichés dans la page et s'il y en avait vraiment beaucoup ça ralentirait l'affichage de la page).

Si besoin il y a un tuto sur les listes déroulantes liées ici

Comment vider plusieurs select document.getElementById('?)

Qui est en ligne