IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Listes déroulantes OnChange


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2014
    Messages : 6
    Points : 1
    Points
    1
    Par défaut Listes déroulantes OnChange
    Bonjour tout le monde,

    J'ai un soucis avec mes listes déroulantes, je m'explique :
    J'ai créé l'évènement OnChange qui nous redirige sur une nouvelle page lors d'un changement et j'aimerais que sur cette nouvelle page, le même menu déroulant ait l'attribut choisi en "selected"
    Par exemple si sélectionne "mer", on arrive sur une nouvelle page qui contient le même menu déroulant avec comme valeur d'affichage : "mer".

    Contraintes (Parce que ce serait trop facile ) :

    Je travaille sur WordPress et j'utilise le plugin FlowFlow que je ne maîtrise pas complètement.
    Ce menu déroulant est créé depuis un fichier JavaScript de la façon suivante.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    r+=
    " <div class=\"menuSW\" style=\"float:left;margin-left:30%;color:#808080;background-color:#e1e1e1\"> 
    <form name=\"form1\" action=\"\" method=\"post\" > 
    <select name=\"testListe\" id=\"testListe\" onchange=\" document.location=this.value; \"> 
    <option> Centres d'intérêts </option >  
    <option value=\"/Mer\" > Mer </option>\" 
      </select> </form> </div>"

    J'ai essayé ceci mais si j'ai bien compris, il est impossible d'utiliser du PHP dans un fichier JS sans passer par AJAX :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    "<option value=\"/Mer\" <?php if( isset($choix) && $choix==\"/mer\" ) echo(\"SELECTED\" ); ?>> Mer </option>"

    J'ai essayé de bidouiller de la façon suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.getElementById('testListe').selectedIndex = 2;
    document.getElementsById("testListe").selected = "selected";
    document.getElementById("testListe" ).options[3].selected=true;
    J'ai essayé plusieurs autres méthodes qui ont toutes échouées.

    De l'aide serait la bienvenue. Si je n'ai pas été clair ou s'il manque des informations, je surveille ce post

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    L'information de l'attribut sélectionné doit se trouver quelque-part dans l'URL pour être transmise d'une page à une autre. C'est ça ou bien un stockage local d'informations, via un cookie ou le localStorage par exemple. Qu'est-ce que tu choisis ?
    One Web to rule them all

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2014
    Messages : 6
    Points : 1
    Points
    1
    Par défaut
    Je stocke la valeur contenue dans l'URL, oui.

    Si par exemple je suis sur l'URL http://monSite/monAdresse/ et que je choisi "mer" depuis le menu déroulant, j'arrive sur l'url http://monSite/monAdresse/mer

    Je peux donc récupérer cette valeur avec le pathname. Maintenant je n'arrive pas à l'utiliser

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Pour récupérer le dernier bout de chemin dans l'URL :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var path = window.location.pathname.split('/').pop();
    Si par exemple path == "mer", tu peux sélectionner l'option value="mer" simplement comme ça:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("testliste").value = path;
    One Web to rule them all

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2014
    Messages : 6
    Points : 1
    Points
    1
    Par défaut
    Je ne sais pas comment est-ce que cela fonctionne, voici mon adresse : http://feeds.mydistrikt.com/distrikt-feed-bretagne/mer/

    Et le code suivant ne m'affiche absolument rien
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var path = window.location.pathname.split('/').pop();
    alert (path);
    J'ai quand même essayé
    ceci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("testListe").value = path;
    Puis directement

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("testListe").value = "Mer";
    ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("testListe").value = "mer";
    Mais une fois que j'utilise ce code, le JavaScript ne fonctionne plus (Comme si il y avait une erreur de synthaxe)

  6. #6
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Vous n'aviez pas précisé le / derrière mer dans votre message précédent. Du coup le dernier bout après le / est une chaîne vide.

    Vous pouvez récupérer l'avant dernier comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.location.pathname.split('/').slice(-2)[0]
    One Web to rule them all

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2014
    Messages : 6
    Points : 1
    Points
    1
    Par défaut
    Bonjour Sylvain,

    Tout d'abord, je vous remercie de chercher à m'aider !

    Cependant ce n'est pas pour récupérer le paramètre dans l'URL que j'ai besoin d'aide car je le fais de cette façon :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var pathArray = window.location.pathname.split( '/' );
    var secondLevelLocation = pathArray[2];
    Là ou je bloque c'est pour choisir une option en "selected" sur mon menu déroulant.

    Je n'arrive même pas à sélectionner une des options à l'aide du langage JS de la façon suivante.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("testListe").value = "mer";
    Une fois que je rajoute ce code, le code JS ne s'exécute plus

  8. #8
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Vous avez une erreur en console ? Vous exécutez bien ce code après que l'élément soit déclaré dans le HTML ?
    One Web to rule them all

  9. #9
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2014
    Messages : 6
    Points : 1
    Points
    1
    Par défaut
    Pour rappel, ce code html est déclarer depuis le JS. Cela pose peut-être un problème.

    A la fin de mon fichier JS, j'ai ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.FlowFlow=l.init()}(jQuery);
    Donc j'imagine que c'est à ce moment là qu'on soumet les informations à notre page.

    Si je place
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("testListe").value = "Mer";
    Avant : Erreur de console
    Après : Rien ne se passe. (Je pense que j'ai la même erreur mais que à cet endroit, ça n'empêche pas le reste du code de s'exécuter.)

  10. #10
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    C'est bien de savoir qu'il y a une erreur en console, ça aurait été encore mieux de savoir laquelle...

    Je suis presque sûr que le problème vient du fait que vous modifiez l'élément avant qu'il soit ajouté au DOM, d'où une erreur de référence à null. Il suffit d'exécuter ce code APRES l'ajout au DOM (sans doute un innerHTML quelque part après votre code en "r+=" posté en premier post)
    One Web to rule them all

  11. #11
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2014
    Messages : 6
    Points : 1
    Points
    1
    Par défaut
    Oui c'est exact l'élément n'existe pas. Pourtant je tente de modifier sa valeur à la toute fin du fichier JS...

    J'ai fais une recherche dans le fichier puis dans tout les fichiers du plugin il n'y a pas de r.innerHTML

Discussions similaires

  1. Activer un bouton radio sur le onchange d'une liste déroulante
    Par guidav dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 14/12/2023, 13h53
  2. [XL-2007] gérer une liste déroulante onchange
    Par Babarsystem dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 01/07/2015, 14h21
  3. [AJAX] liste déroulante onchange méthode post
    Par mrsoyer dans le forum AJAX
    Réponses: 1
    Dernier message: 05/04/2010, 18h28
  4. [MySQL] Liste déroulante : onchange="submit();"
    Par zabuze dans le forum PHP & Base de données
    Réponses: 12
    Dernier message: 02/06/2007, 18h38
  5. Pb onchange dans une liste déroulante
    Par megapacman dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 30/05/2006, 12h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo