onClick select fonctionne pas avec Chrome

[poupilou]

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.

 

[spout]

<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>

document.querySelector('select[name="test"]').onchange = function () {
    console.log(this.value, this.options[this.selectedIndex].dataset.url);
};

https://jsfiddle.net/j6Lzr1o6/

 

[poupilou]

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 :

document.querySelector('select[name="test"]').onchange = function () {
    document.location.href='this.options[this.selectedIndex].dataset.url';
};

 

[spout]

document.location.href=this.options[this.selectedIndex].dataset.url;

 

[cthierry]

HS Ton titre fait bug la page d'accueil de WRI avec le on click select qui s'affiche comme du code /HS

 

[poupilou]

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 :

<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 ?

 

[spout]

JSFiddle déconnait alors codepen:
https://codepen.io/anon/pen/pLzjmL

 

[spout]

@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

 

[WebRankInfo]

oups ! corrigé, merci du signalement

 

[poupilou]

Merci Spout ça marche nickel, tu es vraiment d'une aide précieuse

...et désolé pour la faille XSS...