Utiliser Javascript pour changer l'URL en fonction de l'option sélectionnée dans la liste déroulante

Je n'arrive pas à faire fonctionner ça. Des pensées?Utiliser Javascript pour changer l'URL en fonction de l'option sélectionnée dans la liste déroulante

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Select Video Test</title> 
<script type="text/javascript"> 
    function selectVideo(){ 
     var urlString = "http://www.mycookingsite.com/"; 
     var selectedVideo = this.options[this.selectedIndex]; 
     if (selectedVideo.value != "nothing"){ 
      window.location = urlString + selectedVideo.value; 
     } 
    } 
</script> 
</head> 

<body> 

<form> 
    <select onchange="selectVideo()"> 
    <option value="nothing">Select video from this list</option> 
    <option value="how-to-grill-burgers">How to Grill Burgers</option> 
     <option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option> 
    </select> 
</form> 
</body> 
</html>

Source

2009-05-07 jerome

Vous pouvez uniquement utiliser this lorsque vous êtes dans le code d'événement. Lorsque vous êtes dans la fonction, this renvoie à l'objet de la fenêtre. Envoyez la référence en tant que paramètre à la fonction:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Select Video Test</title> 
<script type="text/javascript"> 
    function selectVideo(obj){ 
     var urlString = "http://www.mycookingsite.com/"; 
     var selectedVideo = obj.options[obj.selectedIndex]; 
     if (selectedVideo.value != "nothing"){ 
       window.location = urlString + selectedVideo.value; 
     } 
    } 
</script> 
</head> 

<body> 

<form> 
    <select onchange="selectVideo(this)"> 
    <option value="nothing">Select video from this list</option> 
    <option value="how-to-grill-burgers">How to Grill Burgers</option> 
     <option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option> 
    </select> 
</form> 
</body> 
</html>

Source

2009-05-07 17:43:11 Guffa

Je ne suis pas sûr de ce que la valeur de this est dans votre code, mais ce n'est pas l'élément <select>. Voici un code de travail:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Select Video Test</title> 
<script type="text/javascript"> 
    function selectVideo(){ 
     var urlString = "http://www.mycookingsite.com/"; 
     var videos = document.getElementById('videos'); 
     var selectedVideo = videos.options[videos.selectedIndex]; 
     if (selectedVideo.value != "nothing"){ 
       window.location = urlString + selectedVideo.value; 
     } 
    } 
</script> 
</head> 

<body> 

<form> 
    <select id='videos' onchange="selectVideo()"> 
    <option value="nothing">Select video from this list</option> 
    <option value="how-to-grill-burgers">How to Grill Burgers</option> 
     <option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option> 
    </select> 
</form> 
</body> 
</html>

Source

2009-05-07 17:35:49 RichieHindle

Votre fonction ne fonctionne pas dans le contexte de l'élément « select » parce que vous êtes juste d'appeler la fonction régulièrement. Pour lutter contre cela soit gérer discrètement l'événement ou passer this à partir de votre 'onchange' gestionnaire:

Option 1:

// first, give 'select' an id 
document.getElementById('select-id').onchange = selectVideo;

Option 2:

<select onchange="selectVideo.call(this)">

Option 3: (The meilleur IMHO)

function addEvent(elem, type, fn) { 
    var W3C, callback = function(e){ fn.call(elem, e||window.event); }; 
    ((W3C = elem.addEventListener) || elem.attachEvent) 
     ((W3C?'':'on') + type, callback, false); 
    return callback; 
} 

addEvent(document.getElementById('select-id'), 'change', selectVideo);

Source

2009-05-07 17:36:10 James

-1

Est-ce que ce travail est fait? Il y a plusieurs façons de le corriger, mais une façon simple est de faire en sorte que selectVideo prenne un paramètre obj, puis change toutes les références en obj. Ensuite, sélectionnezVideo (this) dans l'onchange. Je recommande fortement QuirksMode, en particulier this this page, si vous voulez vraiment comprendre cela.

Source

2009-05-07 17:36:38

Utiliser Javascript pour changer l'URL en fonction de l'option sélectionnée dans la liste déroulante

Répondre

Questions connexes