Discussion :

[Shakuro]

Bonjour tout le monde,

Avant toute chose, je vous souhaite une bonne année pleine de joie de bonheur et de prospérité.

Je suis encore et toujours dans l'élaboration de mon formulaire, qui ne va pas tardé à ce conclure. Grace à vous j'ai pu résoudre pas mal de soucis en .js qui est un langage que je ne contrôle pas du tout. J'essaye de bidouiller du code de temps à autre mais lorsque je me heurte à un problème qui nécessite de savoir coder, là je flanche.

Voici mon problème:

Je dispose de selects stylisés avec un plugin Jquery appelé (selectzor). Jusque là tout va bien. Mon souhait, serrait de faire afficher une div différente à chaque <option> choisie, en l’occurrence dans mon cas il y en a deux. La encore ce n'est pas un gros problème car les sujets sur ce genre de demande pullule sur la toile, mais là où ça devient un peut plus délicat, c'est que mes selects utilisent un plugin, donc le code que j'utilise pour afficher/cacher mes divs n'est plus fonctionnel.

Voici un exemple, sans style (j'affiche/cache un id), tout fonctionne correctement : ICI

Maintenant je rajoute la class="selectzor" (qui fait appel au plugin) à ma select, le style est bien appliqué mais le code n'est plus fonctionnel: ICI


Voici le fichier js du plugin selectzor: ICI

Pourriez-vous m'aider ?
Merci

[NoSmoking]

Bonjour,
tu ne peux plus traiter de la même façon ta fonction, avec la surcouche que tu utilises le this passé à la fonction représente l'objet jQuery qui est visible à l'écran.

1/ remets l'événement onchange sur le SELECT
2/ passes en paramètre l'ID du SELECT, sans utilisation de this.id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<select id="ddlNames"  class="selectzor" style="width: 82px;" onchange="affiche('ddlNames');">
    <option value="portrait">Portrait</option>
    <option value="paysage">Paysage</option>
</select>

3/ dans la fonction tu récupères l'objet via l'ID en paramètre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function affiche( nom_id){
  var liste = document.getElementById( nom_id);
  // etc

une autre façon de faire est de juste changer la récupération de l'objet dans la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function affiche( objet){
  // recup via l'objet jQuery et l'attribute 'parent'
  var liste = document.getElementById( $( objet).attr('parent'));
  for (var i = 0; i < liste.options.length; i++) {
    document.getElementById(liste.options[i].value).style.visibility = i != liste.selectedIndex ? 'hidden' : 'visible';
  }
}

et dans ce cas l'appel de la fonction sur le SELECT reste affiche(this)

[Shakuro]

Merci pour cette réponse détaillée, je ne pouvais pas avoir mieux

J'ai opté pour la deuxième méthode, je ne connaissais pas cette méthode de récupération, jusqu'aujourd'hui (et cela est du à mon manque d'experience) je ne savais que récupérer de cette mannière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('nom_id');

Merci encore, bonne fin de journée. Problème résolu.