/    Sign up×
Community /Pin to ProfileBookmark

Drop Down Menus with URL link options

Copy linkTweet thisAlerts:
Jun 15.2009

I want to create a drop down menu. The selections in the menu are links to other websites. When the visitor selects one of the options I want it to open a new window to that website.

Here’s what I’ve been practicing with:

[CODE]
<html>
<head>
<title>Drop Down Menu with URL links</title>
</head>

<html>
<body>
<form name=”form1″>
<select name=”menu1″>
<option value=”http://www.espn.com”>ESPN</option>
<option value=”http://www.cnn.com”>CNN</option>
<option value=”http://www.abcnews.com”>ABC</option>
<option value=”http://www.cbsnews.com”>CBS</option>
<option value=”http://www.foxnews.com”>FOX</option>
</select>
</body>
</html>

[/CODE]

Normally, these are in <a href> </a> tags and target=”_blank” is the command that opens the website in a separate window. How do I incorporate this into the <option> tags?

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@yrelkinJun 15.2009 — sure this is pretty straightforward:

[code=html]
<html>
<head>
</head>
<body>
<form name="form1">
<select name="menu1" id="menu1">
<option value="http://www.espn.com">ESPN</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.abcnews.com">ABC</option>
<option value="http://www.cbsnews.com">CBS</option>
<option value="http://www.foxnews.com">FOX</option>
</select>
<script type="text/javascript">
var urlmenu = document.getElementById( 'menu1' );
urlmenu.onchange = function() {
window.open( this.options[ this.selectedIndex ].value );
};
</script>
</body>
</html>
[/code]


Hope this is what you needed!

Happy Coding!
Copy linkTweet thisAlerts:
@yrelkinJun 15.2009 — actually this is better:
[code=html]
<html>
<head>
</head>
<body>
<select name="menu1" id="menu1">
<option value="http://www.espn.com">ESPN</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.abcnews.com">ABC</option>
<option value="http://www.cbsnews.com">CBS</option>
<option value="http://www.foxnews.com">FOX</option>
</select>
<script type="text/javascript">
var urlmenu = document.getElementById( 'menu1' );
urlmenu.onchange = function() {
window.open( this.options[ this.selectedIndex ].value );
};
</script>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@amaheshMay 12.2013 — Quick question -what if you want the new URL to show in the same tab, not open a new window?
Copy linkTweet thisAlerts:
@keltoidNov 21.2013 — Thank you, this was exactly the information I needed today.?
Copy linkTweet thisAlerts:
@SteveWillDesignJan 13.2019 — @yrelkin#1014065 This works great on desktop, but I'd like to make this work on mobile. Thank you.
Copy linkTweet thisAlerts:
@rootJan 13.2019 — {"locked":true}
×

Success!

Help @MichiKen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...