选择 下拉列表 链接 问题 Theory and Drop Down List URL Jump Box

http://www.davesite.com/webstation/js/theory1jump.shtml

Drop Down List URL Jump Box

Scenario: I have three web sites I want to link to. I also don't want to bore my friends by having them all lined up in a row, or in a long unordered list. I want them to click a little drop down box, and have that site automatically load.

To accomplish this, I need to use a blank form, and I need to place a selection list on it. I need to add options for each of the three sites, and then I need to do a little JavaScript magic.

Caution: Why do I need a form? Compatibility. Without the form surrounding the drop down list, some browsers will refuse to allow the JavaScript to work properly.

Form and List without JavaScript

<form name="jump1">
<select name="myjumpbox">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

Okay, well, now all we need to do is politely ask the web browser software change the current page location (address) to the one selected when someone chooses something from the drop down box. We'll use the event OnChange.

<form name="jump1">
<select name="myjumpbox"
 OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

Feel free to try the jump box, and hit the back button to return to this page.

You are probably feeling a little like I did the first time I used this code. What does all of that line of gibberish mean?

OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value"

Here's the simple explanation. OnChange is the event. location.href is the browser's current location. We are telling the browser to look at jump1 (our form), then look at myjumpbox on jump1 (our listbox), then figure out which of our options is selected, and then copy whatever value that option has into the browser's current location.

So if we choose davesite.com, the browser gets this:

location.href=http://www.davesite.com/

Cha-Ching. We're at davesite.com.

Note: If you're using frames, and you want the link selected to load in the entire window and not just inside the current frame, change location.href to top.location.href.

If we want to be slick, we can tell the browser to open the page into a new browser window.

<form name="jump2">
<select name="myjumpbox"
 OnChange="window.open(jump2.myjumpbox.options[selectedIndex].value)">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

It sure looks silly, but all jump2.myjumpbox.options[selectedIndex].value holds is the value of the currently selected drop down list item.