ansaurus

Question

Using Javascript to change URL based on option selected in dropdown.

Answer 1

+5 A:

I'm not sure what the value of this is in your code, but it's not the <select> element. Here's some working code:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

RichieHindle 2009-05-07 17:35:49

Answer 2

+4 A:

Your function won't run within the context of the 'select' element because you're just calling the function regularly. To combat this either unobtrusively handle the event or pass 'this' from within your 'onchange' handler:

Option 1:

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

Option 2:

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

Option 3: (The best 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);

J-P 2009-05-07 17:36:10

Answer 3

A:

Is this homework? There are multiple ways to correct it but one simple way is to make selectVideo take a obj parameter, then change all references to inside it to obj. Then, do selectVideo(this) in the onchange.

I highly recommend QuirksMode, particularly this this page, if you want to really understand this.

Matthew Flaschen 2009-05-07 17:36:38

Answer 4

A:

You can only use this when you are in the event code. When you are in the function, this referrs to the window object. Send the reference as a parameter to the function:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Guffa 2009-05-07 17:43:11

ansaurus

tags:

views:

answers:

Using Javascript to change URL based on option selected in dropdown.

related questions