onClick select fonctionne pas avec Chrome

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 7 Mars 2018.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Salut à tous,

    J'ai un <select> qui lorsqu'on sélectionne une valeur de la liste déroulante devrait rediriger la page vers une url qui est indiquée dans le onClick="www.monsite.com/page1.html" pour chaque <option> mais ça ne marche pas avec Chrome, pourquoi ?

    Voici mon code : http://jsfiddle.net/tBjkg/214/

    J'ai essayé de remplacer le onClick par un onChange mais ça fonctionne pas mieux avec Chrome.

    Je ne peux pas mettre mes url dans le "value" des <option value="mes url"> car chaque valeur du "value" est utilisé ensuite dans une requête ajax.

    Comment faire pour que ça fonctionne avec Chrome ?

    Merci pour votre aide.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 168
    J'aime reçus:
    345
    HTML:
    <select name="test">
     <option value="value 1" data-url="www.monsite.com/page1.html">value 1</option>
     <option value="value 2" data-url="www.monsite.com/page2.html">value 2</option>
     <option value="value 3" data-url="www.monsite.com/page3.html">value 3</option>
    </select>
    Code:
    document.querySelector('select[name="test"]').onchange = function () {
        console.log(this.value, this.options[this.selectedIndex].dataset.url);
    };
    https://jsfiddle.net/j6Lzr1o6/
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci Spout.

    Par quel code remplacer console.log(this.value, this.options[this.selectedIndex].dataset.url); pour que la redirection vers l'url se fasse ?

    J'ai essayé ce code mais la redirection ne marche pas :
    Code:
    document.querySelector('select[name="test"]').onchange = function () {
        document.location.href='this.options[this.selectedIndex].dataset.url';
    };
    
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 168
    J'aime reçus:
    345
    document.location.href=this.options[this.selectedIndex].dataset.url;
     
  5. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 356
    J'aime reçus:
    87
    HS Ton titre fait bug la page d'accueil de WRI avec le on click select qui s'affiche comme du code :) /HS
     
    spout et Madrileño aiment ça.
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Ah oui ça marche mieux comme ça :)

    Le problème c'est que je peux avoir 2 types de data-url dans mes <option> comme cela :
    Code:
    <option value="value 2" data-url="www.monsite.com/page2.html">value 2</option>
    <option value="value 3" data-url="getAjaxMaFonction();">value 3</option>
    
    Dans le cas de <option value="value 3" data-url="getAjaxMaFonction();">value 3</option> ça ne déclenche pas ma fonction ajax getAjaxMaFonction(); comment régler ce problème ?
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 168
    J'aime reçus:
    345
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 168
    J'aime reçus:
    345
    @WebRankInfo : petite anectode amusante, le titre de ce topic montre qu'il y a une faille XSS sur la homepage de WRI.
    Rapporté par @cthierry


    [​IMG]
     
    cthierry apprécie ceci.
  9. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 757
    J'aime reçus:
    800
    oups ! corrigé, merci du signalement
     
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci Spout ça marche nickel, tu es vraiment d'une aide précieuse :)

    ...et désolé pour la faille XSS... :)
     
Chargement...
Similar Threads - onClick select fonctionne Forum Date
Onclick Select ne fonctionne pas dans Chrome Développement d'un site Web ou d'une appli mobile 21 Mars 2022
Le simple affichage de ma page déclenche les événements onClick... Merci Google Analytics 17 Mai 2022
Accordion jquery : onclick fermer la section ouverte Développement d'un site Web ou d'une appli mobile 13 Février 2020
Afficher valeur id onclick sur checkbox Développement d'un site Web ou d'une appli mobile 21 Février 2018
Attribut onclick pénalisant ? Référencement Google 12 Mai 2017
Est-ce que Google crawl les onclick? Crawl et indexation Google, sitemaps 23 Juillet 2015
afficher masquer on utilisant Onclick Développement d'un site Web ou d'une appli mobile 21 Janvier 2015
Actualiser un div par onclick? Développement d'un site Web ou d'une appli mobile 28 Juin 2012
Insérer un Enregistrer sous sur OnClick Développement d'un site Web ou d'une appli mobile 20 Novembre 2011
Comment empêcher l'indexation de texte après un <a onclick=... Débuter en référencement 4 Novembre 2011
Onclick en 2011 ? :) Débuter en référencement 19 Octobre 2010
Onclick sur <tr></tr> = coché un bouton radio Développement d'un site Web ou d'une appli mobile 31 Mai 2010
2 actions javascript sur un onclick Développement d'un site Web ou d'une appli mobile 15 Juin 2009
Google et les liens JavaScript, les OnClick Référencement Google 8 Juin 2009
Javascript onclick ou nofollow ? Netlinking, backlinks, liens et redirections 20 Mai 2009
JavaScript: OnClick, OnContextMenu, et quoi d'autre ? Développement d'un site Web ou d'une appli mobile 26 Février 2009
Echanges de liens avec d'autres pages que l'index et fct onclick Problèmes de référencement spécifiques à vos sites 23 Janvier 2009
Lien en dur...ou en mou ? (href et onclick) Netlinking, backlinks, liens et redirections 19 Novembre 2008
Submit d'un formulaire onclick lien Crawl et indexation Google, sitemaps 23 Juin 2008
Ajax , référencement et onClick Netlinking, backlinks, liens et redirections 22 Mars 2008