Sujet Précédent Sujet Suivant

Div différente selon select

eliote23 Messages postés 4 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 23 mars 2011 - 22 mars 2011 à 15:21
eliote23 Messages postés 4 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 23 mars 2011 - 23 mars 2011 à 14:14
Bonjour,

Actuellement j'utilise : 
<select name="zs_secteur" onchange="document.getElementById('four/stt').style.display= (this.options[this.selectedIndex].value== 'FOURNISSEUR/STT' ) ? 'block' : 'none';">

pour afficher ou pas une div à partir du choix d'un select.

Ayant beaucoup de difficulté avec le javascript, pourriez-vous m'orienter vers une solution pour ajouter une autre selon un autre choix dans la liste.


merci d'avance.

BN

4 réponses

Réponse 1 / 4
nhervagault Messages postés 6063 Date d'inscription dimanche 13 avril 2003 Statut Membre Dernière intervention 15 juillet 2011 37
22 mars 2011 à 16:58
Salut,

Regardes du coté de jquery, pour travailler le javascript c'est plus facile.
0
Réponse 2 / 4
007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 4
23 mars 2011 à 11:27
Il est souvent plus aisé d'appeler une fonction ne serait-ce que pour cacher les containers déjà affichés.

Ceux-ci doivent cependant avoir des identifiants uniques qu'il serait bon de retrouver dans les values des options soit intégralement soit sous forme de préfixes ou suffixes (que l'on pourrait obtenir avec des instructions substring).

Dans le première hypothèse (identifiants dans les values) cela prendrait alors la forme indiquée ci-après. 

// Dans le document
<select name="zs_secteur" onchange="newSecteur(this)">

// Dans le script associé 
<script type="text/javascript>
// le s représente ici l'objet select désigné à l'appel par this
function newSecteur(s){var i;
  // cacher tous les containers
  for (i=0;i<s.options.length;i++) document.getElementById(s.options[i].value)='none';
  // afficher celui correspondant au select
   document.getElementById(s.options[s.selectedIndex.value])='block';   
}
</script>

Pour éviter la boucle sur tous les containers, l'on pourrait aussi retenir dans une variable globale l'identifiant du container ouvert (supposé inexistant à l'ouverture). Cela donnerait alors la variante suivante 

var cntSlc=''; 
function newSecteur(s){var i;
   // Cacher le container ouvert (s'il existe)
   if (cntSlc) document.getElementById(cntSlc)='none';
   // Noter l'identifiant du container ouvert
   cntSlc=s.options[s.selectedIndex.value];  
   // L'ouvrir effectivement 
   document.getElementById(cntSlc)='block';
}
0
Réponse 3 / 4
eliote23 Messages postés 4 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 23 mars 2011
23 mars 2011 à 14:12
Merci Julien, par contre j'ai pas tous compris, je viens de tester mais je dois oublier quelque chose.
Quand tu dis :
des identifiants uniques

C'est des noms de div differents ?

qu'il serait bon de retrouver dans les values des options
Je comprends pas tout là

merci d'avance.

BN
0
Réponse 4 / 4
eliote23 Messages postés 4 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 23 mars 2011
23 mars 2011 à 14:14
Voici le code que j'ai : 

<html>
  <head>
    <title>Ceci est le titre de la page</title>
    <script type="text/javascript">
// le s représente ici l'objet select désigné à l'appel par this
function newSecteur(s){
var i;
  // cacher tous les containers
  for (i=0;i<s.options.length;i++) document.getElementById(s.options[i].value)='none';
  // afficher celui correspondant au select
   document.getElementById(s.options[s.selectedIndex.value])='block';   
}
</script>
  </head> 
  
    Faites un choix :,
<select onchange="newSecteur(this)">
<!--<option value="-1">None</option>!-->
<option value="BE">BE</option>
<option value="COM">COM</option>
<option value="COMPTA">COMPTA</option>
</select>,

----

        <table border="0" cellspacing="3" cellpadding="0">----, blabla 1</td>

          

          

            blabla 2

          

          

            blabla 3

          

        </td>
      </tr>
    </table>
  
</html>
0

Discussions similaires

coller deux div avec du css
leon237 -
jordane45 -

2 réponses
la division en java
cs_aliomar -
KIRAIII -

3 réponses
Fonction DISTINCT
KC62 -
KC62 -

2 réponses
Faire une somme dans un select
rudra117 -
Whismeril -

7 réponses
[Division] récupérer la partie entière d'une division avec un arrondi supérieur
Frouf85 -
Frouf85 -

8 réponses
Rejoignez-nous