Dropdown / Select Box Navigation with JavaScript

Simple Navigation

The following is the standard navigation with a <SELECT> onChange action

<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="https://artlung.com/">ARTLUNG</option>
</select>
</form>

With Radio Buttons

This is the same concept, but with Radio buttons and an activation button

Choose a destination:





<form action="../">
    <p><b>Choose a destination:</b><br>
    <input type="RADIO" value="http://www.yahoo.com/"     name="userChoice" id="navRadio01">
        <label for="navRadio01">YAHOO</label><br>
    <input type="RADIO" value="http://www.google.com/"    name="userChoice" id="navRadio02">
        <label for="navRadio02">GOOGLE</label><br>
    <input type="RADIO" value="http://www.altavista.com/" name="userChoice" id="navRadio03">
        <label for="navRadio03">ALTAVISTA</label><br>
    <input type="RADIO" value="http://www.amazon.com/"    name="userChoice" id="navRadio04">
        <label for="navRadio04">AMAZON</label><br>
    <input type="RADIO" value="https://artlung.com/"       name="userChoice" id="navRadio05">
        <label for="navRadio05">ARTLUNG</label><br>
<--the onclick value below must all be on one line-->
<input type="BUTTON"
    value="Go there!"
    onclick="ob=this.form.userChoice;for(i=0;i<ob.length;i++){
    if(ob[i].checked){window.open(ob[i].value,'_top');};}"></p>
</form>

Navigation, Opens In New Window

A variation was asked about:

I'm trying to make a javascript that will open a site in a new (_blank) window from a pulldown menu with a submit button. Using existing scripts that load pages in a specific frame I tried specifying the frame "_blank" or just "blank" in the place where you put the targeted frame name, but it only returns an error. Does anyone have any idea how to do what I'm trying?
<form action="../">
<select name="myDestination">
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="https://artlung.com/">ARTLUNG</option>
</select>
<input type="button"
    value="Open in New Window!"
    onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>

Dropdown to Email Address

SOMEONE ADDED THIS TWIST TO THE ISSUE:

Could this work for a drop down email list & how would that look?
Thanks ...
Hayden Porter changed the method I used for the email version from window.open to location.href to improve the action of the script

Choose a recipient address:

<!-- initial version for email dropdown (c) 1999 Joe Crawford (joe(at)artlung.com)  -->
<!-- coding tested and improved by Hayden Porter (hporter(at)uakron.edu)            -->
<p><b>Choose a recipient address:</b></p>
<form action="../">
<select name="sendEmailTo">
    <option value="mailto:joe@artlung.com">joe@artlung.com</option>
    <option value="mailto:ArtLung@AOL.COM">ArtLung@AOL.COM</option>
    <option value="mailto:webmaster@URMCargo.com">webmaster@URMCargo.com</option>
</select>
<input
    type="button"
    value="I've selected the recipient, Let's send mail!"
    onclick="location.href=this.form.sendEmailTo.options[sendEmailTo.selectedIndex].value">
</form>
<!-- initial version for email dropdown (c) 1999 Joe Crawford (joe(at)artlung.com)  -->
<!-- coding tested and improved by Hayden Porter (hporter(at)uakron.edu)            -->

Dropdown Navigation with Frames

I've tried to do this on my own, and even had golive generate a 'work-around' for me, but if i can reduce the amount of code THAT took and still achieve my goal, I'll be a happy camper.

I have a two-frame set up that uses the right frame for navigation (rebellious-huh?) via 4 drop-down form menus with an onChange handler. This replaces content in the left frame ok, but the last selected item remains in the menu list. I would like the new left frame to have some sort of onLoad to refresh the right frame, to reset, as it were, the menu lists. My work around in golive involves reloading the right page from an 'onLoad' in the left page, which does what I want, but unless I'm mistaken (have been before), it adds something like 70 lines of code to my page. I thought there must be a more compact way to do this?

For the solution visit: Dropdown Navigation with Frames

Navigation to New, Sized Window

There is no end to the variations in dropdown navigation. I think - no - we've exhausted all the possibilities - whoops - here's another! - We're trying to implement a pop-up window from a pull-down menu. We've tried including the onClick in the option, calling a script from the head, and reading Danny Goodman. We got nuthin'. Any help is greatly appreciated.

<form action="../">
<--the onchange value below must all be on one line-->
<select name="myDestination"
    onchange="this.form.WINDOW_NAMER.value++;
    ob=this.form.myDestination;
    window.open(ob.options[ob.selectedIndex].value
    ,'Window_Name'+this.form.WINDOW_NAMER.value,
    'toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=400,height=300')">
    <option>Choose a destination to open in a attribute-controlled popup window!</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="https://artlung.com/">ARTLUNG</option>
</select>
<!-- HIDDEN VARIABLE SO WE PROVIDE UNIQUE NAMES FOR THESE NEW WINDOWS -->
<!-- THUS AVOIDING THE "WHERE'S THAT WINDOW" PHENOMENON -->
<input name="WINDOW_NAMER" type="HIDDEN" value="1">
</form>

Dropdown Navigation to iFrame

IN ANOTHER TWIST:

ANOTHER WONDERFUL QUESTION ABOUT DROP DOWN BOXES:

I AM TRYING TO CREATE A DROP DOWN BOX THAT ON CHANGE WILL CAUSE AN IFRAME TO POP UP IN THE PAGE. THE IFRAME SOURCE WILL BE DIFFERENT FOR EVERY OPTION IN THE DROP DOWN BOX.

ANY INSIGHT YOU COULD GIVE WOULD BE APPRECIATED, I HAVE BEEN WORKING ON THIS FOR SOME TIME AND HAVE NOT FOUND THE APPROPRIATE SOLUTION.

THANKS FOR YOUR TIME,

To which I reply - sure thing - no problem! :-) Keep in mind IFRAMES have zero support in Netscape 4 or earlier. Mozilla, Netscape 6+ and IE support them though. See http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5 for more on IFRAME.

<select name="dest" onchange="window.open(this.options[this.selectedIndex].value,'myIFrame')">
    <option>Choose a destination for your IFrame!</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="https://artlung.com/">ARTLUNG</option>
</select>
</form>

<iframe src="https://joecrawford.com/" name="myIFrame" width="400" height="200">
    You can't see this because your browser does not support iframes.
</iframe>

Dropdown Navigation Where Only Some Links Open New Windows

Question: I need to make a dropdown that spawns a new window for some options but not for others - in the same drop down.

Basically I need the ability to make some <option value""> open a new window others not.

Been trying to figure it out forever.

So if you choose to solve this puzzle let me know.

Answer:
Sure, here it is! Dropdown Navigation Where Only Some Links Open New Windows

Dropdown Navigation with a Go Button

Question: What's the code if I just want a select list, and then a submit button (which opens the selected link in the current window)? 
<form action="../">
<select name="mySelectbox">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="https://artlung.com/">ARTLUNG</option>
</select>
<input type="button" onclick="window.open(this.form.mySelectbox.options[this.form.mySelectbox.selectedIndex].value,'_top')" value="Go">
</form>

Dropdown Navigation with a Go Button Image

Question: I used the portion of code you posted last. But instead of input type="button", I have type="image" src="images/gobutton.png". And when I make my selection and hit the button, it sends me to my root directory instead of the specified destination. However, when I use type="button", it works fine. Any advice? 
<form action="/" name="goForm">
<select name="mySelectbox">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="https://artlung.com/">ARTLUNG</option>
</select>
<a href="#Go" onclick="document.location.href=document.goForm.mySelectbox.options[document.goForm.mySelectbox.selectedIndex].value;"><img src="https://artlung.com/images/go.gif" value="Go" border="0" /></a>
</form>