Drop down menu that will change a text link?

JavaScript
1

Hi,

Does anyone know of a script or how to make a simple drop down menu that changes a text link below it depending on what they select on the drop down menu?

Thanks

2

That could be as easy as:

document.querySelector('#dropdownmenu').onchange = function () {
    // change the text link in here
};

For example:

<p>What type of creature are you?</p>
<select id="creaturetype">
    <option value="choose">Please choose</option>
    <option value="hobbit">Hobbit</option>
    <option value="balrog">Balrog</option>
</select>
<p><a id="creaturemessage" href="#"></a></p>

document.querySelector('#creaturetype').onchange = function () {
    var messages = {
        choose: {message: '', href: '#'},
        hobbit: {message: 'Fly, you fools!', href: 'http://www.youtube.com/watch?v=meOCdyS7ORE'},
        balrog: {message: 'You shall not pass!', href: 'http://www.youtube.com/watch?v=V4UfAL9f74I'}
    };
    document.querySelector('#creaturemessage').innerHTML = messages[this.value].message;
    document.querySelector('#creaturemessage').href = messages[this.value].href;
};
1 Like
3

Thanks… I need the first “Please Choose” drop down option to show as a link when they enter the page. I also need to get the drop down menu to work cause its not working right now…

Heres the test page: http://www.yourdollarhost.com/indextest.html
Scroll down to the bottom where it has the drop down menu “1 Month For $0.90”

Thanks again

4

Move the script to the end of the html (just before the closing body tag). The element it targets doesn’t exist at the point you had the script in the html.

Paul will have to answer the other question if you can clarify what you want:)

5

Do you see this part?

choose: {message: '', href: '#'},

Update that piece so that a link is shown when no choice has let been made.

choose: {message: 'Make your choice', href: 'http://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice'},

And then after defining the onchange event, trigger it afterwards so that the appropriate message appears when the page loads.

document.querySelector('#creaturetype').onchange = function () {
    ...
};
document.querySelector('#creaturetype').onchange();

See the updated example at http://jsfiddle.net/pmw57/1hp8sj2t/1/

1 Like
6

Why doesn’t my code work I wanted the drop down menu link to show as a button I have - http://www.yourdollarhost.com/indextest.html

Thanks

7

Check the console:

Uncaught TypeError: Cannot set property 'onchange' of null indextest.html:11

You have the same issue as PaulO’B pointed out in post#4

8

It works now, thank you!

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.